在应用于table-layout:fixed表格并在单元格上使用填充时,我得到了不同的结果.通过将单元格宽度和填充添加在一起,IE和Firefox似乎可以正常工作.Chrome和Safari仅使用单元格宽度.我看到问题有一个错误,但找不到任何解决方法.有谁知道如何绕过它？
WebKit Bugzilla:https://bugs.webkit.org/show_bug.cgi？id = 13339
table {
width:200px;
border-collapse:collapse;
}
#table-1 {
table-layout:auto;
}
#table-2 {
table-layout:fixed;
}
td {
padding:5px 10px;
}
td.set-width {
width:15px;
}
.box {
width:15px;
height:15px;
background-color:red;
}
<h2>Table-Layout: Auto</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-1">
<tr>
<td> </td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td> </td>
<td>unbroken</td>
</tr>
</table>
<h2>Table-Layout: Fixed</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-2">
<tr>
<td> </td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td> </td>
<td>unbroken</td>
</tr>
</table>
基本上我遇到的问题是在Safari/Chrome中它改变了我的列的宽度,即使我已经指定了a)表格上的宽度,b)表格布局:固定,以及c)我的第一行上的特定宽度添加填充和边框值时,添加到指定表的宽度.在IE7和Firefox 3中,表格呈现相同.但是在Safari/Chrome中,它决定通过从其他列中获取空间来扩大第二列.
