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.
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.
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.
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.
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.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With