html - 如何在 Bootstrap 表行之间添加文本行？

Question

我一直在尝试在 Bootstrap 中创建一个表格，在行之间添加文本行，以描绘表格中的不同组，而无需复制标题并制作多个表格。这是我尝试做的一个例子。

   <div class="table-responsive">
  <table class='table'>
    <thead>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>

    <tr>
      <td>
        A sub-header introducing a different group of data.
      </td>
    </tr>

    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
  </table>

   <h3>Another sub-header introducing a different group of data</h3>

  <table class='table'>
    <!-- Header is omitted -->

    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

创建一个新的表行并使子标题成为行的第一列也是唯一一列看起来很糟糕，因为文本被压缩到这一列中。我还尝试创建一个新表并省略标题，将其替换为放置在两个表之间的标题标签。这导致所有后续行未对齐，因为它们没有可对齐的标题。我想要的只是可以在表格的行之间插入一行文本，而不会影响表格的结构。

Answer 1

上面的行中有 3 列，您需要有一个 colspan 属性: 引入不同数据组的子标题。