通常使用table-layout:fixed用在表格上来使表格能准确的设置宽度。常见的例子莫过于
<style type="text/css">
table{table-layout:fixed; border-collapse:collapse;border:1px solid #000; border-width:1px 0px 0px 1px;width:200px;}
td{text-align:left;overflow:hidden;padding:0px;margin:0px;white-space:nowrap; border:1px solid #000; 0px 1px 1px 0px;}
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:100px;" nowrap="nowrap" >中文中文阿飞的房间萨芬;撒</td>
<td style="width:100px;" nowrap="nowrap" >saaaa</td>
</tr>
</table>
如果去掉table-layout:fixed,表格的宽度会根据内容自动调整,比如上面的例子,如果去掉table-layout:fixed。第一个单元格的宽度会超过100px;
但是最近发现,使用table-layout:fixed在webkit内核浏览器上(safari/chrome)。宽度显示会出现问题。
看看下面的例子:
<style type="text/css">
#test
{
border-collapse:collapse;
}
#test td, #test th
{
border:solid 1px black;
padding:3px;
}
</style>
<table style="width:736px;table-layout:fixed;margin:0;padding:0" id="test">
<thead>
<tr>
<th width="25">ID</th>
<th width="270">Name</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
浏览器上的截图为:
搜了一番资料后。在webkit官网上有这么一个Bug
If a table has both "table-layout: fixed" and "width: 0", then cells with
borders have wrong width.
This occurs in both safari 3.x mac&win and linux svn 31841 (debian sid).
The expected behavior is rendered by IE6, IE7, Firefox 2, Firefox 3 beta and
Opera 9.2.
Consider a table with 3 columns, all with width 200px.
If one of the cells have "border-left: 50px; width: 150px;",
then according to the rules of "table-layout: fixed", the cell should still
have width 200px.
But webkit renders the cell with only width 150px.
就是设置了table-layout:fixed之后,table的td宽度style.width不再是内容的宽度,而是内容+边框。而且是忽视padding。这让人很郁闷。
总之一旦设置了table-layout:fixed之后,webkit浏览器的单元格宽度并不会像你想象的那样准确的宽度。
参考资料:
webkit的bug描述:
https://bugs.webkit.org/show_bug.cgi?id=13339https://bugs.webkit.org/show_bug.cgi?id=18565stackoverflow的提问:
http://stackoverflow.com/questions/2943369/table-layoutfixed-rendering-differences-in-safarihttp://lists.macosforge.org/pipermail/webkit-unassigned/2008-April/071125.html