表格单元格填充与铬的困境 [英] Table cell padding woes with chrome

问题描述

我在chrome中的表格细胞填充有很多麻烦。看起来如果表格单元格不包含纯文本，则不应用任何填充。

I am having a lot of trouble with table cell paddings in chrome. It seems that if a table cell does not contain pure text, then no padding is applied at all.

我的标记：

<table>
        <tr>
            <th></th>
            <th class="account-picture"></th>
            <th class="account-name">Name</th>
            <th class="account-email">Email</th>
            <th class="account-last">Last Sign in</th>
        </tr>

        <tr>
            <td>
                <fieldset>
                   <ul>        
                       <li><input type="checkbox" id="enabled" name="test[]" value="enabled"></li>
                   </ul>    
                </fieldset>
            </td>

            <td class="account-picture">
                   <div class="online">
                      <img src="http://www.genengnews.com/app_themes/genconnect/images/default_profile.jpg">                           </div>
            </td>
            <td class="account-name">test test test test test test test test test test test test test test test test test test</td>
            <td class="account-email">test test test test test test test test test test test test test test test test test test</td>
            <td class="account-last">15 April 2012 10:19 AM</td>
        </tr>
</table>

CSS：

img{ 
    height: 42px;
    width: 42px;
}

td, th{      
    padding: 0 12px;
    vertical-align: middle;
}

.account-picture{
    width: 40px;

}

.account-name{
    min-width: 100px;
}

.account-email{
    min-width: 120px;
}

.account-last{
    min-width: 140px;
}

table{
    table-layout: fixed;
    float: none;
    width: 100%;
    margin-top: 10px;
 }

td, th{      
   word-wrap: break-word;
   padding: 0 12px;
   vertical-align: middle;
}

td:first-child, th:first-child{
  width: 14px;
}

和小提琴： http://jsfiddle.net/5mPFk/1/

这是它呈现的如firefox 11：

And this is what it renders as in firefox 11:

Chrome：18（最新）：
>

Chrome: 18 (latest):

IE9：
>

IE9:

可以看出，IE和FF可以正常工作，但不能使用chrome。

As can be seen, IE and FF works properly, but not with chrome. Why is this happening and what are possible solutiosn for this?

推荐答案

已删除 table-layout：fixed ，它似乎工作。

如果 table-layout：fixed ，那么 width 而不是 min-width 应该用于定义列宽。

If table-layout: fixed is to be used, then width instead of min-width should be use to define column widths.

不确定为什么只有Chrome正在播放，但也许它有更好的标准实施。

Not sure why only Chrome was playing up, but perhaps it has a better standards implementation.

这篇关于表格单元格填充与铬的困境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！