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

【问题标题】：CSS text-overflow table cell with percentage max width具有百分比最大宽度的 CSS 文本溢出表格单元格
【发布时间】：2015-02-04 22:37:42
【问题描述】：

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

根据CSS text-overflow in a table cell?，我应该使用 max-width 属性，但根据How can I set the max-width of a table cell using percentages?，我不能使用百分比。

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>

我该如何解决这个问题？

【问题讨论】：

你应该使用带有column-count: 3;CSS3 Multiple Columns的div
我不明白我为什么要这么做——它是一个包含表格数据的表格。

标签： html css

【解决方案1】：

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

切换到table-layout:fixed 和everything will work as intended。

【讨论】：

效果很好！确保您没有在代码中的其他位置应用表格上的最小宽度...

【解决方案2】：

layout: fixed 并不适用于所有情况，表格应该是流动的并自动调整单元格，这也意味着为某些单元格设置 1% 并让其他单元格自动调整。

使用这个：http://jsfiddle.net/maruxa1j/

也适用于 IE9+。

【讨论】：