如何在 bootstrap table 行之间添加文本行？

Question

我一直在尝试在 bootstrap 中创建一个 table，行与行之间有文本行，以在 table 中描绘不同的组，而不必复制 header 并制作多个 table。这是我尝试做的一个例子。

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

新建 table 行并使 sub-header 成为一行的第一列和唯一一列看起来很糟糕，因为文本被压缩到这一列中。我还尝试制作一个新的 table 并仅省略 header，将其替换为放置在两个 table 之间的 header 标签。这导致所有后续行都未对齐，因为它们没有 header 可以对齐。我想要的只是一行文本，我可以在 table 的行之间插入而不会干扰 table.

的结构

Answer 1

你上面一行有 3 列，你需要有一个 colspan 属性: A sub-header 介绍一组不同的数据。

Answer 2

你需要用同样的table，用colspan取几个case。 <td colspan="2">blabla</td>

Answer 3

通过结合使用 <tbody>、<th scope="rowgroup">、<th scope="row">:

，尝试使用 HTML5 规范示例来描绘不同的行

<table>
<caption>Measurement of legs and tails in Cats and English speakers</caption>
<thead>
<tr> <th> ID <th> Measurement <th> Average <th> Maximum
<tbody>
<tr> <td> <th scope=rowgroup> Cats <td> <td>
<tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
<tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
</tbody>
<tbody>
<tr> <td> <th scope=rowgroup> English speakers <td> <td>
<tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
<tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</tbody>
</table>

来源：HTML5 规范，4.9.10 The th element

如何在 bootstrap table 行之间添加文本行？

How do I add lines of text in between bootstrap table rows?

html

tablelayout

twitter-bootstrap