table 末尾的 Rowspan 的工作方式不同

Question

我使用 html 和一些 bootstrap 创建了一个简单的 table，但最后一个 rowspan 并没有像我想象的那样工作，这里是代码：

我希望 4 个红色标记的单元格成为一个单元格，所以我将第一个 <td>group1</td> 替换为 <td rowspan="4">group1</td> 并删除了剩余的 3 个 <td>group1</td> 但它已经弄乱了整个 table.

也把它放在<div class="col-lg-7 mb-4">div，但我也试过没有任何div——效果是一样的。考虑到其余的行跨度工作得很好，我不确定是什么导致了这个问题。

/* 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>

我该怎么办？提前致谢！

Answer 1

我真的不知道你所说的“把整个 table 搞得一团糟”是什么意思。添加 row-span="4" 并删除以下三个 td 标签后，table 对我来说看起来很好：

我唯一能看到的是 table 单元格高度的变化。这可以通过添加 CSS:

来防止

tr {
    height: 1rem;
}

它使每行高度相等并产生以下结果：

table 末尾的 Rowspan 的工作方式不同

Rowspan at the end of the table is working differently

html

css

bootstrap-4