Jerec TheSith Jerec TheSith - 1 month ago 11
HTML Question

Nested colspan in HTML table

I'm trying to make a simple table but once I set

colspans
in consecutive table rows, the second row's
colspan
attributes are overridden :

<table class="d-week">
<caption>
<h4>table</h4>
</caption>
<thead>
<tr>
<th class="col_first"></th>
<th colspan="1">1st week</th>
<th colspan="1">2nd week</th>
<th colspan="1">3rd week</th>
</tr>
<tr>
<th></th>
<th colspan="3">prop1</th>
<th colspan="3">prop2</th>
<th colspan="3">prop3</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>col1</td>
<td>col1</td>
<td>col1</td>
<td>col2</td>
<td>col2</td>
<td>col2</td>
<td>col3</td>
<td>col3</td>
<td>col3</td>
</tr>
</tbody>
</table>


But here, the table body cells are aligned with the first row of headers instead of the second (even if I remove the
colspan
property from the first headers' row). Could someone help me?

EDIT : what if there are more than 3
th
in the second header's row ?
http://jsbin.com/icetom/3

Answer

I don'tknow if i understand well, but, maybe you just need to set colspan=3 to the first row of headers. You can think about the calspan relative to the maximum number of cells that you'll have. In your example it's 10. If you want a column in a row to span on more columns you select the number based on that.

Comments