在具有多个子标题的表中填充数据答案

【问题标题】：Filling data in a table with multiple subheaders在具有多个子标题的表中填充数据
【发布时间】：2018-01-22 18:11:24
【问题描述】：

我有一个表，其中第二列包含多个子标题。对于表中的每一行，其第二列下的数据可以由多行组成。我无法同步子标题下的这些多行。

<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th colspan="3">col2</th>
    </tr>
    <tr>
      <th></th>
      <th>h1</th>
      <th>h2</th>
      <th>h3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row1</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
      <td>data6</td>
    </tr>
    <tr>
      <td>row2</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
    </tr>
  </tbody>
</table>

对于row1，我希望data4、data5、data6也分别在h1、h2、h3之下。

我在 AngularJS/Bootstrap 中执行此操作，因此数据/格式很重要。尽管我愿意接受解决方案，但我认为为其第一列添加另一行包含空白数据的行是行不通的。

【问题讨论】：

你有一个带有虚拟数据的例子吗？我想帮你！但数据结构会有所帮助。
我在这里找到了一个类似的答案：stackoverflow.com/questions/30915100/…我无法将行排列起来，因为我在第一列中的数据有多行：jsfiddle.net/c9fm3eur
我可以帮助你！我们可以使用以下方式进行设计： - Bootstrap、CSS 甚至 Flex！让我知道 :) @Geno 您正在使用表格，没关系！但是您想要的设计是先进的，我们可以使用更好的工具来做到这一点。

标签： angularjs twitter-bootstrap

【解决方案1】：

这不是棱角分明的。顺便说一句，你能用<br/>吗？

我正在开发一个 plnkr：http://plnkr.co/edit/XNQPnHM1z58XB5usioZA?p=preview

但是有了这个结构，我可以提出更好的建议。

【讨论】：