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

Answer 2

Something like this? http://jsfiddle.net/NhGsf/

By using: display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;

And setting first and last child to fixed width the middle section will have the rest off the space

Answer 3

See this fiddle (or, alternatively), you need to set the max-width for each table cell:

body{
    width:100%;
    padding:0;
    margin:0;
}
table {
    margin-top: 50px;
    width:100%;
    max-width:100%;
}
table td {
    white-space: nowrap;
}
table td:nth-child(1) {
    background-color:red;
    max-width:100px;
}
table td:nth-child(2) {
    background-color: green;
    overflow:hidden;
    max-width:100px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table td:nth-child(3) {
    background-color: orange;
    max-width:100px;
}

Answer 4

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

<div class="box">
<table width="100%" border="1">
  <tr>
    <td class="small">First column with text</td>
     <td class="small">Small column</td>
     <td>
<table>
     <tr>
    <td  class="extend" >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.</td>
    </tr>
    </table>
   </td>
  </tr>
</table>
</div>

Except for the ellipsis it is working well. See result

Answer 5

min-width in combination with width:100% seems to work in firefox and chrome:

  tr {
    td:first-of-type {
      width: 100%;
    }
    td:last-of-type {
      min-width: 200px;
    }
  }

Answer 6

I was facing the same challenge and I found the following solution using tables.

The HTML needs to use a DIV in the long column. The CSS defines your small and extend classes. The hard part being the definition of the extend class.

This gives you the behavior you describe.

HTML

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

CSS

table {
  margin-top: 50px;
}

table td {
  white-space: nowrap;
}

table td:nth-child(1) {
  background-color: red;
}

table td:nth-child(2) {
  background-color: green;
}

table td:nth-child(3) {
  background-color: orange;
}

.extend {
  display: table;
  table-layout: fixed;
  width: 100%
}

.small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}