Table of liquids and fixed columns

Question

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

At first it sounded simple, but the problem is that the two columns of liquid should behave differently.

The last column should be stretched as much as possible to fit its contents, so they never hide, but should not leave empty space. And the middle column should occupy all the free space that it can find, but also overflow to hidden if the latter needs to be increased.

I tried to do this work with css, but I was not able to get it to work ... Is there a way to do this with pure css or do I need js?

EDIT

This is 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 have no need to use tables since CSS was introduced, and I'm pretty surprised that some people still do this. But there may be a reason, so please do not take this as criticism.

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

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

This will make sure that the div has a width of at least 210 pixels 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 can use an identifier instead of a class. This will make your code cleaner and more elegant. Hope this helps.

Answer 2

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 3

If you do not need packaging, follow these steps:

 td{ padding: 10px; } 

If a wrapper is required, you need to change the table width to auto and add the min-width parameter.

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

Answer 4

CSS file changes made

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