具有百分比最大宽度的 CSS 文本溢出表格单元格

Question

我有一个带有百分比宽度的列的表格。如果这些单元格中的内容超过该百分比宽度，我希望它被省略号截断。

根据表格单元格中的 CSS 文本溢出？我应该使用 max-width 属性，但根据如何使用百分比设置表格单元格的最大宽度？我不能用百分比来做。

table {
  width: 100%;
}
table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table tr td:nth-of-type(1) {
  width: 20%;
}
table tr td:nth-of-type(2) {
  width: 30%;
}
table tr td:nth-of-type(3) {
  width: 50%;
}

<table>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

</table>

我该如何解决这个问题？

Answer 1

这不适用于标准的 HTML 表格：自动布局算法将继续拉伸单元格，以便它们始终适合其内容，甚至忽略显式宽度。

切换到table-layout:fixed，一切都会按预期工作。