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

【问题标题】：Styling a table with fixed width columns and overflow text为具有固定宽度列和溢出文本的表格设置样式
【发布时间】：2011-07-14 18:31:56
【问题描述】：

我有一个

包含一些文本值可能太长的列，因此我不想使用“文本溢出：省略号”和“溢出：隐藏”来“修剪”它们

在 CSS 中。我注意到，为了让我这样做，我必须在上设置“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 不尊重它。

我做错了吗？有没有更好的办法？我不介意必须对每个列宽进行硬编码，但我讨厌必须使用边框框大小。

【问题讨论】：

只是一个建议，你可以简单地将表格包裹在一个带有溢出的
中并让用户水平滚动吗？这样您就可以保持表格数据完整。
其中一个列的数据可能很长，如果不进行修剪，看起来会很差。
您能否发布一些示例 HTML 来说明您的表格是如何构建的？

标签： css html-table

【解决方案1】：

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

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

【讨论】：

太棒了！这正是我一直在寻找的。我也没有听说过 jsFiddle。感谢您的提示。