Reputation: 2359
How can I offset one column in a table row? I've used colspan but it takes two columns width, but I want to like this image.
Here is my code:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px 15px;
text-align: left;
}
<table>
<tr>
<th colspan="2">65</th> <th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
Upvotes: 3
Views: 22582
Reputation: 43574
Your HTML markup isn't valid with the missing <td>
element on the third row. You get the following warning on the HTML checker:
A table row was 5 columns wide, which is less than the column count established by the first row (6).
So you have to set a (empty) cell, but you can hide this cell with CSS. To hide the empty cell you can use the :empty
and :blank
(is a draft at the moment) pseudo-classes. There is no need to set a class for the empty cell.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px 15px;
text-align: left;
}
td:empty {
visibility:hidden;
}
td:blank {
visibility:hidden;
}
<table>
<tr>
<th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td></td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
Upvotes: 6
Reputation: 4472
th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px 15px;
text-align: left;
vertical-align:top;
}
td.empty{ border: 0;}
<table cellspacing="0">
<tr>
<th colspan="2">65</th> <th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td class="empty"></td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
Upvotes: 4