"Splitting" a table?

Question

Is there any way to "split" table rows so I can set the column width independently? Here is what I mean:

************************************
*  70%                 *    30 %   *
************************************
*  20 %   *           80 %         *
************************************

I know the following ways to do it:

1. Use 2 tables. But that gives me sometimes problems with the whole width, but it works.
2. 70% and 80% are colspan="2". That one feels like a hack and is not optimal.
3. Use another table inside this table and split that one up. This is working, but nested tables get complicated.

Is there a way to just split the thead from the tbody and then set the width independently?

Thanks in advance ...

Bernhard

Answer 1

My suggestion is to use DIVs instead of table, please see..

<DIV style="width:100%"> 
  <DIV style="width:70%; float:left;">row1 - column1</DIV>
  <DIV style="width:30%; float:left;">row1 - column2</DIV>

  <DIV style="width:20%; float:left;">row2 - column1</DIV>
  <DIV style="width:80%; float:left;">row2 - column2</DIV>
</DIV>

likewise you can have columns with different widths. You can have your own css classes, I just put inline css for demonstration. See it is very flexible as you can loop it through or split the table (of DIVs) not just in to TWOs but THREEs and more.

Hope this will help you. Thank you.