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

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类似，但在Firefox36中却没有。Chrome也没有在单元格中添加右侧填充，但至少它增加了表格的宽度（有些）。

这是错误还是其他浏览器出错了？我是不是错过了什么？

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

Answer 1

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

在.table1中，文本在两个字符后换行，您可以在左右两侧看到30%的填充。注意表格的宽度。

现在，看看.table1a，在本例中为0%填充。请注意，表的宽度与第一个示例相同，正如预期的那样，它的宽度刚好足以在一行中包含文本。

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

在最初的示例中，文本是一个单词，不能换行。这导致了溢出情况，文本位于左侧，填充30%，但它向右溢出，并突出到表的右填充和右边缘/边框上。

这是适当的表格布局行为，只是不要过于直观。

在最后一种情况.table2中，由于您指定了30px的左/右填充，因此表布局算法首先将左/右30px的填充与计算出的文本长度一起添加到单元格宽度中，然后再确定表的总宽度。

最后要注意的是，前两种情况下的30%填充可能已经添加到表的总宽度中，但决定将总宽度保持为所包含文本的计算宽度。对于CSS规范为什么会沿着这条线发展，我没有一个明确的答案。

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

<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>

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>