Question

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

   <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属性：引入不同数据组的子标题。

Answer 2

您需要使用相同的表，并使用colspan来处理几种情况。 <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

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

3 个答案: