Question

我有一个＆lt; table＆gt;它包含一些文本值太长的列，因此我不想在CSS中的＆lt; td＆gt;上使用“text-overflow：ellipsis”和“overflow：hidden”来“修剪”它们。我注意到为了让我这样做，我必须在＆lt; table＆gt;上设置“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-sizing：content-box”时（所以我可以设置列宽而不必担心填充/边框），Chrome不尊重它

我做错了吗？有没有更好的办法？我不介意对每个列宽进行硬编码，但我不想使用边框框尺寸。

Answer 1

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

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

使用固定宽度列和溢出文本设置表格样式

1 个答案: