Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fluid and Fixed Columns Table

Tags:

html

css

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.

like image 231
arvere Avatar asked Sep 04 '13 17:09

arvere


People also ask

What is table-layout fixed?

When table-layout: fixed is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table's first row to define column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.

How do you fix column width in a table?

The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.

How fix TD table width?

Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.

How fix HTML table size?

To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.


2 Answers

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.

like image 77
Ricardo Parker Avatar answered Sep 20 '22 17:09

Ricardo Parker


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;
}
like image 31
Vladimir Kocjancic Avatar answered Sep 23 '22 17:09

Vladimir Kocjancic