Webkit浏览器不考虑填充在确定表格布局中的单元格宽度：固定

问题描述

将 table-layout：fixed 应用于表格并在单元格上使用填充时，我会得到不同的结果。 IE和Firefox似乎通过将单元格宽度和填充添加在一起正常工作。 Chrome和Safari只使用单元格宽度。我看到有一个bug出来的问题，但是找不到任何工作。有人知道如何解决这个问题吗？

I am getting different results when applying table-layout:fixed to a table and using padding on the cells. IE and Firefox seem to work correctly by adding the cell width and the padding together. Chrome and Safari only use the cell width. I saw there is a bug out for the problem, but can't find any work arounds. Does anyone know how to get around it?

WebKit Bugzilla：

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>&nbsp;</td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>unbroken</td>
</tr>
</table>
<h2>Table-Layout: Fixed</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-2">
<tr>
<td>&nbsp;</td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>unbroken</td>
</tr>
</table>

推荐答案

如果您使用< col> INSTEAD OF上的< colgroup> ; td> 。

You can work around this bug if you use the <colgroup> tag and specify widths on the <col> INSTEAD OF on the <td>.

.secondCol {
  width: 15px;
}

<table border="1" cellspacing="0" cellpadding="0" id="table-2">
  <colgroup>
    <col class="firstCol">
    <col class="secondCol">
  </colgroup>
  <tr>
    <td>&nbsp;</td>
    <td><div class="box"></div></td>
  </tr>
</table>

这篇关于Webkit浏览器不考虑填充在确定表格布局中的单元格宽度：固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！