CSS在具有不同宽度列的表上隐藏溢出文本

Question

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

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

|-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%; }

但宽度会被忽略（大概是因为固定宽度？），并且表格显示每列的宽度相同。

问题解决了

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

Answer 1

如果您不需要支持旧浏览器，请尝试接受的答案： CSS text-overflow in a table cell?

Answer 2

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

Answer 3

向表格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 demo（仅在Chrome中测试过）