解决表格列宽设置问题-优快云博客

遇到一个表格不能设置宽度（table有宽度，有一两列需要设固定大小的宽度并希望看到展现出来的宽度值与设定的一样，其他的列则可以根据剩余宽度自动填充，但是显示出来的宽度比实际设置的值多了几个像素）这个问题，百度了一下查到一些资料：

首先贴资料，相信大家看了基本就了解了：

tableLayout 属性用来显示表格单元格、行、列的算法规则。

固定表格布局：

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

自动表格布局：

在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。（以上tableLayout的内容摘自http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp）

因此，在设定宽度的时候需要给table添加table-layout:fixed;。

但是在给td设定了宽度以后还是不能正常显示，此时就需要一个其他的属性 col或colgroup，给col或者colgroup设置一个宽度即可解决问题。(一个有趣的点是当设定的宽度不是4的倍数的时候，列的宽度总会显示小数，即差那么一点才满设定的宽度，作为一个小菜鸡暂时没发现为啥，(lll￢ω￢))。

下面贴个代码，仅供参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table,tr,td{
border:1px solid;
border-collapse:collapse;
}
table{
width:1000px;
table-layout:fixed;
}
tr,td{
height:30px;
}
table>tbody>th>td{
width: 40px;
}
/*设定td的宽度,无效*/
/*#col1{
width: 40px;
}
#col2{
width: 80px;
}
#col4{
width: 50px;
}
#col7{
width: 120px;
}*/
</style>
</head>
<body>
<table>
<!--所有的宽度设定时，已设定宽度不能被4整除时会出现不能设定宽度，与列数多少无关-->
<!--全部用colgroup-->
<!--<colgroup align="center" width="100">
</colgroup>
<colgroup  />
<colgroup  />
<colgroup  />
<colgroup />
<colgroup />
<colgroup style="width:90px;"/>
<colgroup />-->
<!--全部用col-->
<!--<col width="90" />
<col  />
<col width="90" />-->
<!--<col  />
<col width="80"/>
<col  />
<col  />
<col  />-->
<!--colspan 和 col融合-->
<colgroup span="3" width="90">
<!--组合用时同样受4的倍数限定-->
<col width="90"/>
<col width="90"/>
<col width="120"/>    
</colgroup>
<colgroup span="1"></colgroup>
<colgroup width="80"></colgroup> <!--span缺省值为1-->
<colgroup width="90"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td id="col1">diyi</td>
<td id="col1">diyi</td>
<td id="col2">第二列</td>
<td id="col3">第三列</td>
<td id="col4">第四列</td>
<td id="col5">第五列</td>
<td id="col6">第六列</td>
<td id="col7">第七列</td>
</tr>
<tr>
<td>adfa</td>
<td>飒飒东风</td>
<td>谔谔</td>
<td>打发</td>
<td>打法微软</td>
<td>啊多发点</td>
<td>啊啊啊啊啊啊</td>
<td>啊啊啊啊啊啊</td>
</tr>
<tr>
<td>fasdfa</td>
<td>阿斯蒂芬</td>
<td>啊打发</td>
<td>阿迪斯发</td>
<td>爱的色放我</td>
<td>的法沙发和</td>
<td>啊啊啊啊啊啊</td>
<td>啊打发</td>
</tr>
</table>
</body>
</html>