Styling a table with fixed-width columns and overflow text

Question

I have a <table> that contains several columns whose text value may be too long, so I won’t “crop” them using “text overflow: ellipsis” and “overflow: hidden” on <td> in CSS. I noticed that for this I have to set "table-layout: fixed" to <table> which then forces me to specifically set each column width.

I did not want to use a bunch of class names or identifiers for columns, so I used the following CSS solution:

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

The list of columns is fixed, so it’s not very important that I use the column number to style it, and I’m glad that the markup is more compact. This solution works fine, but I wanted to ask if there is a better solution.

In order for this work to be done, I had to set the column width so that it was taken into account both for filling and for the border. This way it will work in IE, Chrome and FF. It seems to me that this is rather unpleasant, but when I tried to use "-webkit-box-sizing: content-box" (so that I could set the column width without worrying about padding / border), Chrome did not respect him.

Am I doing something wrong? Is there a better way? I don’t mind hard coding every column width, but I don’t like to use the border size of the box.

Answer 1

I'm not sure if this is what you are looking for, but this is what I came up with: http://jsfiddle.net/e7ZKq/1/

If you set max-width to your td rule along with your other properties, the cells will match the contents until you click that maximum width, and then crop the remainder with the ellipsis.