Chrome 的表格单元格填充问题

Posted

技术标签:

【中文标题】Chrome 的表格单元格填充问题【英文标题】:Table cell padding woes with Chrome 【发布时间】:2012-04-26 21:12:42 【问题描述】:

Chrome 中的表格单元格填充有很多问题。似乎如果表格单元格不包含纯文本,则根本不应用填充。

我的标记:

<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 中呈现的内容:

Chrome:18(最新):

IE9:

可以看出,IE 和 FF 可以正常工作,但不能使用 chrome。为什么会发生这种情况,有什么可能的解决方案?

【问题讨论】:

也许关闭你的input 元素会有所帮助:&lt;input ... /&gt;,虽然我觉得如果 Chrome 不能优雅地处理它有点奇怪......(同样适用于你的@ 987654329@元素顺便说一句) 关闭的输入元素仍然存在相同的问题。虽然我认为如果使用 html5 文档类型,则没有必要关闭输入标签。 【参考方案1】:

删除了table-layout: fixed,它似乎工作了。

如果要使用table-layout: fixed,则应使用width 而不是min-width 来定义列宽。

不知道为什么只有 Chrome 正在发挥作用,但也许它有更好的标准实现。

【讨论】:

以上是关于Chrome 的表格单元格填充问题的主要内容,如果未能解决你的问题,请参考以下文章

Chrome vs Firefox之战-表格单元格中的图像叠加[重复]

chrome vs FF/IE/Opera 计算表格单元格宽度? (表格布局:固定)

一个 html 表格单元格中的单元格填充

使文本区域填充表格单元格

使 DIV 填充整个表格单元格

相同大小的表格单元格填充包含表格的整个宽度