通常使用table-layout:fixed用在表格上來使表格能準確的設(shè)置寬度。常見的例子莫過于
<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，表格的寬度會根據(jù)內(nèi)容自動調(diào)整，比如上面的例子，如果去掉table-layout:fixed。第一個單元格的寬度會超過100px;
但是最近發(fā)現(xiàn)，使用table-layout:fixed在webkit內(nèi)核瀏覽器上(safari/chrome)。寬度顯示會出現(xiàn)問題。
看看下面的例子：
<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官網(wǎng)上有這么一個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.
就是設(shè)置了table-layout:fixed之后,table的td寬度style.width不再是內(nèi)容的寬度，而是內(nèi)容+邊框。而且是忽視padding。這讓人很郁悶。
總之一旦設(shè)置了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