我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

mark:webkit表格设置css table-layout:fixed的bug

通常使用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>&nbsp;</td>

                
<td>&nbsp;</td>

                
<td>&nbsp;</td>

                
<td>&nbsp;</td>

                
<td>&nbsp;</td>

                
<td>&nbsp;</td>

                
<td>&nbsp;</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=13339
https://bugs.webkit.org/show_bug.cgi?id=18565
stackoverflow的提问:
http://stackoverflow.com/questions/2943369/table-layoutfixed-rendering-differences-in-safari

http://lists.macosforge.org/pipermail/webkit-unassigned/2008-April/071125.html







posted on 2011-06-30 18:39 衡锋 阅读(1827) 评论(1)  编辑  收藏 所属分类: Web开发

评论

# re: mark:webkit表格设置css table-layout:fixed的bug 2012-07-02 12:17 hafeyang

此bug,webkit已经修复 https://bugs.webkit.org/show_bug.cgi?id=78412  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: