Advertisements
I am looking to achieve table something like this in bootstrap 5.
I have tried like this
<table class="table table-bordered">
<thead>
<tr>
<th><span>Domain</span></th>
<th colspan="3"><span>DATE</span></th>
<th colspan="3"><span>DATE</span></th>
<th colspan="3"><span>DATE</span></th>
<th colspan="3"><span>DATE</span></th>
<th colspan="3"><span>DATE</span></th>
<th colspan="3"><span>DATE</span></th>
<th colspan="3"><span>DATE</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Example1</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
</tr>
<tr>
<td><span>Example2</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
<td rowspan="3" ><span>DR</span></td >
<td rowspan="3" ><span>IR</span></td >
<td rowspan="3" ><span>SR</span></td >
</tr>
</tbody>
</table>
But I am getting weird result like this image
I am not getting idea what I am missing, searched lot but not found any proper solution for the same. Let me know if anyone here can help me for solve the issue.
Thanks!
>Solution :
You are missing the rowspan on the DOMAIN, and a second tr in the header.
Also you shouldn’t have colspans for the subsequent tds:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" class="align-middle"><span>Domain</span></th>
<th colspan="3" class="text-center"><span>DATE</span></th>
<th colspan="3" class="text-center"><span>DATE</span></th>
<th colspan="3" class="text-center"><span>DATE</span></th>
<th colspan="3" class="text-center"><span>DATE</span></th>
<th colspan="3" class="text-center"><span>DATE</span></th>
<th colspan="3" class="text-center"><span>DATE</span></th>
<th colspan="3" class="text-center"><span>DATE</span></th>
</tr>
<tr>
<th><span>DR</span></th>
<th><span>IR</span></th>
<th><span>SR</span></th>
<th><span>DR</span></th>
<th><span>IR</span></th>
<th><span>SR</span></th>
<th><span>DR</span></th>
<th><span>IR</span></th>
<th><span>SR</span></th>
<th><span>DR</span></th>
<th><span>IR</span></th>
<th><span>SR</span></th>
<th><span>DR</span></th>
<th><span>IR</span></th>
<th><span>SR</span></th>
<th><span>DR</span></th>
<th><span>IR</span></th>
<th><span>SR</span></th>
<th><span>DR</span></th>
<th><span>IR</span></th>
<th><span>SR</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Example1</span></td >
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
</tr>
<tr>
<td><span>Example2</span></td >
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
<td><span>DR</span></td>
<td><span>IR</span></td>
<td><span>SR</span></td>
</tr>
</tbody>
</table>