CODEWITHSUNDEEP
htmlcss
arvere
arvere

Reputation: 737

Fluid and Fixed Columns Table

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.

Table diagram

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.

Upvotes: 12

Views: 31831

Answers (4)

Ricardo Parker
Ricardo Parker

Reputation: 809

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.

Upvotes: 2

Andrew Johnson
Andrew Johnson

Reputation: 446

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

Upvotes: 1

Vladimir Kocjancic
Vladimir Kocjancic

Reputation: 1842

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

Upvotes: 1

Andrew Johnson
Andrew Johnson

Reputation: 446

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>

Upvotes: 1

Related Questions