在我表格中每个第二个单元格的末尾添加“...”

Question

我想在我的表中每个第二个单元格的末尾添加3个点（“...”），因为这是一个随窗口大小扩展的列（参见下面的屏幕截图）。

这是我的css：

table.list                 { table-layout:fixed; width: 100%; white-space: nowrap; }
table.list td              { border-bottom: 1px dotted #d9d9d9; height: 25px; padding-bottom: 2px; }
table.list th              { text-align:left; }
table.list td:nth-child(1), table.list th:nth-child(1) { width: 160px; }
table.list td:nth-child(2), table.list th:nth-child(2) { width: auto ; overflow:hidden; }
table.list td:nth-child(3), table.list th:nth-child(3) { width: 110px; padding-left: 20px; }
table.list td:nth-child(4), table.list th:nth-child(4) { width:  50px; padding-left: 20px; }

如您所见，第二个单元格是自动调整（隐藏/显示文本变化，具体取决于窗口宽度）。

我已经尝试过这个：

table.list td:nth-child(2):after { content: "..."; }

它不起作用。

有什么建议吗？感谢。

修改

我更新了我的问题，因为我在Ofir Farchy的帮助下更进了一步。在这里使用Internet Explorer查看我的演示http://jsbin.com/ulofoq/23/edit#preview。

Chrome浏览器没问题，只能使用Internet Explorer。

让我们尝试调整窗口大小，你会看到我在表格第一行的文本前面得到'...'。没关系。但是对于第二行，这些'......'没有显示!! ??

Answer 1

当您尝试在<td>之间添加内容时，您的选择器将无效。如果<td>中有另一个元素，如<span>，则可以使用after伪选择器选择此元素。这不是很好的语义标记，但它会起作用。

Answer 2

您是否尝试将text-overflow: ellipsis;添加到相关单元格的样式中？

您可以阅读有关此here和here的更多信息 我相信它是一个CSS3属性（几乎所有新浏览器都支持）。

Answer 3

你的CSS在firefox和IE中适用于我。请参见jsbin.com/ulofoq/edit

也许您只是使用了错误的选择器“table.list”？