CSS Table with one column taking remaining space

Question

I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.

What I want:

I have the following simple HTML:

<table>   <tr>     <td class="small">First column with text</td>     <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>     <td class="small">Small column</td>   </tr> </table> 

The table itself should be 100% width of the parent container. I wish the first and last column (.small) to be as large as they need to be, so the content can fit into it without a line break (so pretty much what white-space: nowrap does). The middle column (.extend) should take the rest of the space (so the table will stay within 100% width of its parent container) and the text within .extend should be ellipsised before it needs to break to a seconds line.

I've prepared a fiddle for this at http://jsfiddle.net/3bumk/

With these background colors I would expect a result like:

Is there any solution for this?

What I get:

My problem is, if I can make the text to stay in one row (having no line breaks), the table will always overflow its parent container width (and cause it to be scrollable), before having the idea to ellipsis the text in the middle column.

What is no solution (I often found):

It's no solution to set the first and third column to a 'fixed' with (percentage or pixel), because the content will have different length from time to time. It is possible to add as many div or span as needed (or get rid of the table all together - what I tried first, with display and table but I didn't find a working solution that way either).

PS: It would be very nice if you could edit the fiddle to a working example, if you know one :-)

EDIT I am free to use divs instead of a table too!

Answer 1

Here is an answer using divs instead of a table: DEMO

HTML

<div class="container">     <div class="fnl first">First Baby</div>     <div class="fnl last">Last Guy</div>     <div class="adjust">I will adjust between both of you guys</div> </div> 

CSS

.container{     width: 300px; } .first{     float:left;     background: red; } .last{     float:right;     background: orange; } .adjust{     text-overflow: ellipsis;     white-space: nowrap;     overflow: hidden; }