I have encountered an issue with a simple table that I created using HTML and Bootstrap. The last rowspan feature did not behave as expected. Here is the code snippet:
https://i.sstatic.net/Mz82q.png
The intention was to merge 4 cells marked in red into one, so I replaced the first <td>group1</td> with
<td rowspan="4">group1</td><td>group1</td>, but this resulted in messing up the entire table layout.
Although it is placed within the
<div class="col-lg-7 mb-4">/* CSS styling (optional): */
table.table-bordered {
border: 1px solid #2f8dff!important;
box-shadow: 0px 0px 100px 0px #2f8dff;
margin-top: 20px;
text-transform: uppercase;
font-size: 12px;
color: white;
}
table.table-bordered>thead>tr>th {
border: 1px solid #2f8dff!important;
}
table.table-bordered>tbody>tr>td {
border: 1px solid #2f8dff!important;
}<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">17:00-18:00</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">18:00-19:00</td>
<td>1</td>
<td rowspan="2">group3</td>
<td>3</td>
<td>4</td>
<td rowspan="2">group3</td>
</tr>
<tr>
<td rowspan="2">group2</td>
<td>8</td>
<td rowspan="2">group2</td>
</tr>
<tr>
<td rowspan="2">19:00-20:00</td>
<td rowspan="4">group1</td>
<td rowspan="2">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="3">group1</td>
<td rowspan="3">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="2">20:00-21:00</td>
<td>3</td>
<td>group1</td>
</tr>
<tr>
<td>7</td>
<td>group1</td>
</tr>
</tbody>
</table>Any suggestions on how to address this issue would be greatly appreciated! Thanks!