如何在引导表行之间添加文本行？答案

【问题标题】：How do I add lines of text in between bootstrap table rows?如何在引导表行之间添加文本行？
【发布时间】：2015-12-23 08:05:07
【问题描述】：

我一直在尝试在引导程序中创建一个表格，在行之间使用文本行来描绘表格中的不同组，而不必复制标题并制作多个表格。这是我尝试做的一个例子。

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

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

【问题讨论】：

标签： html twitter-bootstrap tablelayout

【解决方案1】：

您在上面的行中有 3 列，您需要有一个 colspan 属性：介绍不同数据组的子标题。

【讨论】：

【解决方案2】：

你需要使用同一张表，并使用colspan来分几种情况。 <td colspan="2">blabla</td>

【讨论】：

【解决方案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

【讨论】：