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

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 也不会向单元格添加右侧填充，但是至少它增加了 table 的宽度（有点）。

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

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

Answer 1

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

在 .table1 中，文本在两个字符后环绕，您会看到左右各有 30% 的填充。注意 table.

的宽度

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

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

在您的原始示例中，文本是一个单词，不能换行。这导致了溢出情况，并且文本被定位到左侧并具有 30% 的填充，但是，它溢出到右侧并突出了右侧填充和 table 的右侧 edge/border。

这是正确的 table 布局行为，只是不太直观。

在最后一种情况下，.table2，由于您指定了 30px left/right 内边距，table 布局算法首先将 left/right 30px 内边距添加到单元格宽度与文本的计算长度，这又决定了 table.

的总宽度

最后一点，也许前两种情况下的 30% 填充可以添加到 table 的总宽度中，但决定将总宽度保持为计算得出的值对于包含的文本。关于 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>

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

Content spilling out of table cell when using percentage

css

cross-browser