Variable sized column with ellipsis in a table

Question

I am trying to layout a table in CSS. The requirements are as follow: the first column expands as much as it can, and text in the first column is limited to one line of text, if more, there should be an ellipsis. The other columns take only the space they need to contain the text in them without wrapping (text-wrap: nowrap).

The table itself is 100% width.

I managed to have either a fixed size first column with ellipsis, or a variable size first column with no ellipsis, I can't find a way to have a variable sized columns with ellipsis. Is it achievable with CSS? I can use CSS 3 properties if required, but I would like to avoid the use of JS.

Markup:

<table class="table">
<tr>
 <th>First</th>
 <th class="no-wrap">Second</th>
</tr>
<tr>
 <td class="expand-column">
 Some long long text here
 </td>
 <td class="no-wrap">
 Other text
 </td> 
</tr>
</table>

CSS:

.table, .expand-column {
 width: 100%;
}
.no-wrap {
 white-space: nowrap;
}

• Gimmy: Can you post some code for the people who want to help you?
• Flavien: Ok, I added some code.

Answer 1

Is this the desired look: http://jsfiddle.net/Uhz8k/ ? This works in Firefox 21+, Chrome 43+ (probably earlier), and IE11. It doesn't work in IE9. (Don't know about IE10.)

The html code is below:

<table class="table">
 <tr>
 <th>First</th>
 <th>Second</th>
 </tr>
 <tr>
 <td class="expand-column">
 Some long long text here, Some long long text here, Some long long text here,
 Some long long text here, Some long long text here, Some long long text here,
 Some long long text here, Some long long text here, Some long long text here,
 Some long long text here, Some long long text here, Some long long text here.
 </td>
 <td class="no-wrap"> Other text here </td>
 </tr>
 <tr>
 <td class="expand-column">
 Some other long text here, Some other long text here, Some other long text here,
 Some other long text here, Some other long text here, Some other long text here,
 Some other long text here, Some other long text here, Some other long text here,
 Some other long text here, Some other long text here, Some other long text here.
 </td>
 <td class="no-wrap"> Some other text here </td> 
 </tr>
</table>

and the CSS:

.table {
 width: 100%;
 border: 1px solid grey; 
}
.expand-column {
 max-width: 1px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 border: 1px solid grey;
}
.no-wrap {
 white-space: nowrap;
 border: 1px solid grey;
 width: 1px;
}
th {
 border: 1px solid grey;
}

• EHorodyski: Man, you got me really excited with this until I learned it won't render in IE9 (which my company is stuck using). Any IE solutions?
• gamliela: It works but it looks like a hack... (max-width must be written, but is actually ignored). Will it continue to work in future browser versions?
• Arun Rana: it works but i could not see ellipsis (...) at the end of text !!!

Answer 2

What are you asking is little dynamic flavour. Iam not sure if there is any table properties that will allow you. My sugg is create a nested table tag. take first aolumn as single table and another table with rest of it. the parent table table will contain 100%width property as u want.