我有一个表格,其中列具有百分比宽度。如果这些单元格中的内容超过该百分比宽度,我希望用省略号截断它。
根据表格单元格中的CSS文本溢出?我应该使用最大宽度属性,但是根据如何使用百分比设置表格单元格的最大宽度?我不能用百分比来做。
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>
我该如何解决这个问题?
这不适用于标准 HTML 表格:自动布局算法将不断拉伸单元格,以便它们始终适合其内容,甚至忽略显式宽度。
切换到table-layout:fixed
,一切都将按预期工作。
layout: fixed
并非适用于所有情况,表格应该是流动的并自动间隔其单元格,这也意味着为某些单元格设置 1% 并让其他单元格自动调整。
使用这个: http://jsfiddle.net/maruxa1j/
也适用于IE9+。