Fluid and Fixed Columns Table

Question

I have a table on my layout that has 5 columns, 3 of them should be fixed width in px and the other 2 should be fluid.

It sounded simple at first, but the problem is the two fluid columns should behave differently.

The last column should stretch as much as it can to fit its contents, so they are never hidden, but shouldn't ever leave empty space. And the middle column should occupy all the free space it can find, but also overflow to hidden in case the last one needs to grow larger.

I tried to make this work with css, but I couldn't manage to make it work... Is there a way to do this with pure css or I need js?

EDIT

That's what I got so far:

HTML

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="fixed">fixed</td>
        <td class="fluid hidden">fluid</td>
        <td class="fixed">fixed</td>
        <td class="fluid visible">this content should always be visible</td>
    </tr>    
</table>

CSS

table{
   width: 100%;
   table-layout: fixed;
}

td{
    padding: 10px;  
    white-space: nowrap;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{

}

.hidden{
    overflow:hidden;
}

http://jsfiddle.net/KzVbX/

It works almost as expected. Except for the last column.

Answer 1

Maybe I can help, maybe not.

First, I would use divs instead of tr/td. I honestly don't have a need for using tables since CSS was introduced, and I'm rather surprised that some people still do. But there could be a reason, so please do not take that as criticism.

If you use divs, then edit this section of your code:

.visible {
  overflow:visible;
  min-width: 210px;
}

That will make sure that the div is at least 210 pixels wide no matter what. It should work. BTW, if this is the only table on the page and that div or td is unique in the sense that it has a minimum height, then you may want to use an id instead of a class. That will make your code cleaner and more elegant. Hope this helps.

Answer 2

If you don't need wrapping do this:

td{
    padding: 10px;  
}

If wrap is desired, you need to change width of table to auto and add min-width parameter.

table{
   width: auto;
   min-width: 100%;
   table-layout: fixed;
}

Answer 3

Try this and see if it is close to what you are looking for:

DEMO - http://jsfiddle.net/WGpB3/

<table width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
            <td style="width:60px;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:hidden;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:visible;">&nbsp;</td>
    </tr>

Answer 4

Made changes to CSS file

* DEMO - http://jsfiddle.net/KzVbX/2/

table{
   width: 100%;
    table-layout:fixed;
}

td{
    padding: 10px;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{
  overflow:visible;
}

.hidden{
    overflow:hidden;
    max-width:20%;
    white-space:nowrap;
}