CSS table with dynamic height and width items

[k00ma]

Hi,
Is it possible to do CSS table with dynamic size items like in this example:

[edited by: jatar_k at 2:12 pm (utc) on Aug. 11, 2008]
[edit reason] no urls thanks [/edit]

[Xapti]

What do you mean CSS table? if you want a table, use a table, if you want the layout you showed in the picture (which isn't a table), then use floating divs.
The easiest way I know of to get this done, is to wrap each column of cells in another div: 1-5, 2-6, 3-7, 4-8. the div wrappers must be floated. Because those divs are floated, the inner divs will not need to be.

If you want the divs/cells to be dynamic (resizable), you will have to use javascript, but the same basic layout will still be in effect.

[csuguy]

Yes, divs would be the better choice to implement that. Although, if you need to make them resizable and don't want to use javascript, you can nest tables to get that effect.

Use one main one that has one row and 4 cols (set the widths of the col td's with css). Then put a 2 row'd table within each of the main td's. It's a little messy but could save you a lot of time if you are worried about it resizing. If you don't care if it resizes, use divs.

[k00ma]

Well actually if I put divs with float:left or something but if div heights vary the next row starts at below of maximun height div and there could be whitespace on top of some divs, is there any way to make this compact like in the picture. DIV width can be fixed value, but height can vary

[csuguy]

Combine tables with divs!

Use a table with 1 row and 4 columns. Then put 2 divs that aren't floated or anything inside of each column - each with 100% width.

For example:

...
#the_row td div
{
  width:100%;
}
...
<table>
  <tr id="the_row">
   <td>
     <div>...</div>
     <div>...</div>
   </td>
   <td>
     <div>...</div>
     <div>...</div>
   </td>
   <td>
     <div>...</div>
     <div>...</div>
   </td>
   <td>
     <div>...</div>
     <div>...</div>
   </td>
  </tr>
</table>

that should solve your problem!
HYBRIDS FTW!