0

我想显示一个包含不同宽度列的表格。我希望表格的每一列都隐藏溢出文本。我已经尝试了很多东西，但似乎没有任何东西可以提供所需的输出。

例如，我想要这样的东西。

|-Row 1-|-----------Row 2------------|---------Row 3 ----------|---Row 4 ---|
|Hello..|Here is some longer text t..|You get the idea         | Blah Bla...|

我在CSS中尝试了以下...

.ex_table { table-layout:fixed }
.ex_table tr td{ overflow:hidden; text-overflow: ellipsis; white-space:nowrap; }

.ex_table .cell_1 { width:10%; }
.ex_table .cell_2 { width:40%; }
.ex_table .cell_3 { width:30%; }
.ex_table .cell_4 { width:20%; }

但是宽度被忽略（可能是因为固定宽度？）并且表格显示在每列宽度相同的位置。

问题解决了

上面的解决方案确实有效，但我的表格中有表格标题。您需要设置标题而不是单元格的宽度！

4

2 回答 2

0

向表格 CSS 添加宽度...您实际上是将单元格宽度设置为百分比nothing或auto导致问题的百分比。通过向表格 CSS 添加宽度，您可以为单元格宽度提供明确的大小定义。

.ex_table { table-layout:fixed; width: 100%;}
.ex_table tr td { 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    border: 1px solid #aaa;}

.ex_table .cell_1 { width:10%; }
.ex_table .cell_2 { width:40%; }
.ex_table .cell_3 { width:30%; }
.ex_table .cell_4 { width:20%; }

jsFiddle 演示（仅在 Chrome 中测试）

于 2013-07-11T22:03:13.537 回答
0

也许你需要添加一个固定的高度？.ex_table tr td{ 高度：20px; 溢出：隐藏；文本溢出：省略号；空白：nowrap；}

于 2013-07-11T21:58:07.057 回答