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

Answer 1

You can re-arrange the columns by moving the longest one at the end then use nested tables.

CSS

.extend
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}
td
{
    white-space:nowrap;
}
.box
{
    width:1000px;
    border:blue solid thick;
    overflow:hidden;
}

HTML

  

    
First column with text
     
Small column
     


     

    
This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.
    
    
   
  

Except for the ellipsis it is working well. See result