Question

I would like to add 3 dots (“…”) at the end of each second cell in my table because this is a column which expand with the window size (see screenshots below).

Here is my 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; }

As you can see, the second cell is auto adjusting (hiding/showing text varying, depending on the window width).

I already try this one:

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

It doesn’t work.

Any suggestions? Thanks.

EDIT

I update my question because I’m a step further with the help of Ofir Farchy See my demo here http://jsbin.com/ulofoq/23/edit#preview with Internet Explorer.

No problem with Chrome, only with Internet Explorer.

Let’s try to resize the window and you’ll see that I get ‘…’ in front of the text in the first line of the table. That’s ok. But for the second line these ‘…’ are not showed !!??

Answer 1

Have you tried adding text-overflow: ellipsis; to the relevant cells’ style?

You can read more about this here and here.
I believe it is a CSS3 property (supported by almost all new browsers).