Rowspan at the end of the table is working differently

Issue

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!

Solution

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:

Answered By - Pyry Lahtinen