找了大半个小时,网上都是千变一律的添加<colgroup>标签,但是和我试了,在我这里没效果。

无意中搜索colspan标签,来到w3c,查看colspan效果,发现这里表头合并了,但是内容的td宽度并没有失效。

仔细看了下发现问题所在

w3c代码:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3C</title> 
</head>

<body>

<table border="1">
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
  <tr>
    <td width="200">January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

  我的代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>xxxxx</title> 
</head>

<body>

<table border="1">
<thead>
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td width="200">February</td>
    <td>$80</td>
  </tr>
</tbody>
</table>
</body>
</html>

  仔细看,唯一的区别就是我的代码多了<thead>和<tbody>标签,去掉了<thead>标签,td的宽度就生效了,至于到底什么原因就不清楚了

如果table加了table-layout: fixed;这个属性,要去掉

 

posted on 2020-04-01 22:38  gongzi  阅读(2299)  评论(0编辑  收藏  举报