Question

根据您使用的浏览器，以下内容将以不同方式显示：

.table1 td {
  padding: 0 30%;
  border:1px solid;
}
.table2 td {
  padding: 0 30px;
  border:1px solid;
}

<table class="table1"><tr><td>Text</td></tr></table>
<table class="table2"><tr><td>Text</td></tr></table>

我希望table1的行为类似于table2，但在Firefox 36中却没有.Chrome也没有为单元格添加右侧边距，但至少它增加了表格宽度（有点）。

这是一个错误还是其他浏览器做错了什么？我错过了什么吗？

我可以在不使用绝对单位的情况下实现所需的行为吗？

Answer 1

考虑以下简单表格。在前两种情况下，我将文本间隔开，并分别添加了30％和0％的填充。

在.table1中，文本在两个字符后回绕，您会看到左右两侧的30％填充。注意表格的宽度。

现在，查看.table1a，在这种情况下为0％填充。请注意，表的宽度与第一个示例相同，第一个示例的宽度足以将文本包含在一行中，如预期的那样。

表格布局算法首先根据内容确定表格的宽度，在本例中为单行字符。在计算宽度之后，计算30％填充并将其应用于表格单元格，这是您在顶部示例中看到的

在您的原始示例中，文本只是一个单词，并且无法绕过第二行。这导致了溢出情况，并且文本位于左侧，有30％的填充，但是，它向右溢出并突出于右边的填充和桌子的右边缘/边框。

这是正确的表格布局行为，只是不过于直观。

在最后一种情况下，.table2，因为您指定了30px左/右填充，表格布局算法首先将左/右30px填充添加到单元格宽度以及计算的文本长度，这反过来决定了桌子的整体宽度。

作为最后一点，也许前两种情况中的30％填充可能已添加到表的整体宽度，但是决定将整体宽度保持为包含文本的计算。关于为什么CSS规范沿着这条线发展，我没有明确的答案。

＆＃13;

.table1 td {
  padding: 0 30%;
  border:1px solid;
}
.table1a td {
  padding: 0 0%;
  border:1px solid;
}
.table2 td {
  padding: 0 30px;
  border:1px solid;
}

＆＃13;

<table class="table1"><tr><td>T e x t 1 </td></tr></table>
<table class="table1a"><tr><td>T e x t 1 </td></tr></table>
<table class="table2"><tr><td>Text 2</td></tr></table>

＆＃13;

Answer 2

.table1 td {
  width:100px;
  padding:0 30%;
  border:1px solid;
}
.table2 td {
  padding: 0 30px;
  border:1px solid;
}

<table class="table1"><tr><td>Text1</td></tr></table>
<table class="table2"><tr><td>Text</td></tr></table>

使用百分比时内容溢出表格单元格

2 个答案: