表格末尾的 Rowspan 工作方式不同答案

【问题标题】：Rowspan at the end of the table is working differently表格末尾的 Rowspan 工作方式不同
【发布时间】：2022-01-02 00:35:24
【问题描述】：

我已经使用 html 和一些引导程序创建了一个简单的表，但是最后一个 rowspan 并没有像我想象的那样工作，这里是代码：

我想要 4 个红色标记的单元格为一个，所以我将第一个 <td>group1</td> 替换为 <td rowspan="4">group1</td> 并删除了剩余的 3 个 <td>group1</td>，但它弄乱了整个表格。

也将它放在<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>

我该怎么办？提前致谢！

【问题讨论】：

问题在于你并不真正想要 4 的行跨度。你想要 3-1/2 之类的东西。您可能需要使用嵌套表。见stackoverflow.com/questions/63723302/html-rowspan-half-a-row

标签： html css bootstrap-4

【解决方案1】：

我真的不知道你所说的“搞砸了整张桌子”是什么意思。添加 row-span="4" 并删除以下三个 td 标记后，该表对我来说看起来还不错：

我唯一能看到的是表格单元格的高度变化。这可以通过添加这个 CSS 来防止：

tr {
    height: 1rem;
}

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

【讨论】：