table-layout: fixed;当文本溢出单元格时不工作

Question

下表中所有列的大小应按给定宽度(以像素为单位)设置:

table {
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid black;
overflow: hidden;
}

<table>
<col style="width: 50px">
<col style="width: 40px">
<col style="width: 30px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>supersuperlooooongcontent</td>
</tr>
</table>

然而，尽管overflow: hidden设置在td元素上，但长文本使整个列展开。

Answer 1

除了table-layout: fixed;之外，还需要将width设置为table元素，以获得期望的行为。见https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

单元格使用overflow属性来决定是否截取溢出的内容，但仅当表的宽度已知时;否则，它们不会溢出单元格。

table {
border-collapse: collapse;
table-layout: fixed;
width:120px;
}
td {
border: 1px solid black;
overflow: hidden;
}

<table>
<col style="width: 50px">
<col style="width: 40px">
<col style="width: 30px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>supersuperlooooongcontent</td>
</tr>
</table>