CODEWITHSUNDEEP
html-tablecolumn-width
Bernhard
Bernhard

Reputation: 181

"Splitting" a table?

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

Upvotes: 0

Views: 61

Answers (2)

Venkata Krishna
Venkata Krishna

Reputation: 1776

One more possibility of achieving it but not exactly any simpler than the 3 possible methods you mentioned already, is
Setting the <td>'s position to absolute and individually setting the width, top, left properties accordingly for each cell.

This lets you set the width independently, but you will have to set top or left properties as well.

Upvotes: 1

BabyDuck
BabyDuck

Reputation: 1249

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.

Upvotes: 1

Related Questions