I have a problem to achieve a table header which in some parts contains a second row of header elements, where three th
cells belong to one main header cell above them. I don't know if is it possible to create an html table like this. To what I mean, I am providing my sample code and an illustration.
Goal:
Please take a look the hyphen line, that table i want to achieve to my table on my html. so right now i have the output of this. please see the second illustration.
Here is my html code:
<table class="table table-bordered">
<thead>
<tr style="font-size:13px; text-align: center;">
<th>1600</th>
<th colspan="2">P1W1</th>
<th colspan="2">TGT</th>
<th colspan="2">LY</th>
<th colspan="3" scope="colgroup">Variance Vs Target</th>
<th colspan="3" scope="colgroup">Variance Vs 2018</th>
</tr>
</thead>
<tbody>
<tr style="font-size:12px;">
<td style="">ADS</td>
<td style="text-align: right;">23,635</td>
<td></td>
<td style="text-align: right;">21,676</td>
<td></td>
<td style="text-align: right;">20,790</td>
<td></td>
<td style="text-align: right;">1,959</td>
<td style="text-align: right;">9.0%</td>
<td></td>
<td style="text-align: right;">2,845</td>
<td style="text-align: right;">13.7%</td>
<td></td>
</tr>
</tbody>
</table>
Thank you..