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

Depending on which browser you use, the following will display differently:

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

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

I'd expect table1 to behave like table2, but it does not in Firefox 36. Chrome also doesn't add a right side padding to the cells, but at least it's increasing the table's width (somewhat).

我希望table1的行为类似于table2,但它不适用于Firefox 36. Chrome也没有为单元格添加右侧边距,但至少它会增加表格的宽度(稍微)。

Is that a bug or are the other browsers doing something wrong? Am I missing something?

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

Can I achieve the desired behaviour without using absolute units?

如果不使用绝对单位,我能达到预期的行为吗?

2 个解决方案

#1

Consider the following simple tables. In the first two cases, I spaced out the text and added 30% and 0% padding respectively.

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

In .table1, the text wraps around after two characters and you see the 30% padding on the left and right. Note the width of the table.

在.table1中,文本在两个字符后回绕,并且您在左侧和右侧看到30%的填充。注意表的宽度。

Now, look at .table1a, in this case 0% padding. Note that the width of the table is the same as the first example, which is just wide enough to contain the text on a single line, as expected.

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

The table layout algorithm first determines the width of the table based on the content, in this case, single line of characters. After the width is computed, the 30% padding is computed and applied to the table cell, which is what you see in the top example

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

In your original example, the text was a single word, and could not wrap around a second line. This caused an overflow condition, and the text was positioned to the left with 30% padding, but, it was overflowing to the right and jutting out over the right padding and the right edge/border of the table.

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

This is proper table layout behavior, just not overly intuitive.

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

In the final case, .table2, since you specified 30px left/right padding, the table layout algorithm first adds the left/right 30px padding to the cell width along with the computed length of the text, and this in turn determines the overall width of the table.

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

As a final note, perhaps the 30% padding in the first two cases could have been added to the overall width of the table, but a decision was made to keep the overall width to be that computed for the contained text. I don't have a definitive answer as to why the CSS specification evolved along this line.

作为最后一点,也许前两种情况下的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>

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

#1