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

时间:2014-12-07 00:34:27

标签: html css

我有一个包含宽度百分比的列的表。如果这些单元格中的内容超过了这个百分比宽度,我希望用省略号截断它。

根据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>
&#13;
&#13;
&#13;

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:3)

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

切换到table-layout:fixedeverything will work as intended

答案 1 :(得分:0)

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

使用此:http://jsfiddle.net/maruxa1j/

也适用于IE9 +。