设置具有固定宽度列和溢出文本的表的样式

Question

我有一个，它包含了一些列，它们的文本值可能太长了，因此我不想在CSS中的's上使用"text-overflow: ellipsis“和"overflow: hidden”来“裁剪”它们。我注意到，为了做到这一点，我必须在上设置"table-layout: fixed“，然后强制我专门设置每一列的宽度。

我不想对列应用一堆类名或ID，所以我使用了以下CSS解决方案：

#error-list th:nth-child(1),
#error-list th:nth-child(6) {
    width: 53px;
}

#error-list th:nth-child(2) {
    width: 131px;
}

#error-list th:nth-child(3) {
    width: 226px;
}

#error-list td:nth-child(3),
#error-list td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

列列表是固定的，所以我使用列的序号来设置它的样式并不是什么大问题，我很高兴标记更精简了。这个解决方案效果很好，但我想问一下是否有更好的解决方案。

为了让上面的方法起作用，我必须设置列的宽度，以便它也考虑到填充和边框。这样它就可以在IE，Chrome和FF中工作。这样做感觉很糟糕，但当我尝试使用“-webkit-box- set : content-box”(这样我就可以设置列宽而不必担心填充/边框)时，Chrome并不尊重它。

我做错了什么吗？有没有更好的方法？我不介意硬编码每一列的宽度，但我讨厌不得不使用边框框大小。

Answer 1

我不确定这是否是您要找的，但这就是我想出来的：http://jsfiddle.net/e7ZKq/1/

如果您设置了td规则的max-width和其他属性，单元格将适合内容，直到您达到最大宽度，然后它将使用省略号截断其余部分。