Rowspan at the end of the table is working differently - html

Question

I've created a simple table using html and a bit of bootstrap, but the last rowspan doesn't work as I thought it will, here's code:
I wanted 4 red-marked cells to be one, so I've replaced first <td>group1</td> with <td rowspan="4">group1</td> and removed remaining 3 <td>group1</td> but it has messed up whole table.
Also it is placed it <div class="col-lg-7 mb-4"> div, but I've also tried without any div - the effect was the same. I'm not sure what is causing that problem, considering that the rest rowspans is working just fine.
/* I don't think CSS is needed, but just in case: */
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>
What shall I do?
Thanks in advance!

Answer 1

I don't really know what you mean by "messed up whole table". After adding the row-span="4" and removing the three following td tags, the table looked just fine for me:
The only thing I can see is the changing height of that table cell. This can be prevented by adding this CSS:
tr {
height: 1rem;
}
It makes every row equal height and produces following result: