在包含多个子标题的表格中填充数据

Question

我有一张表，其第二列包含多个子标题。对于表中的每一行，其第二列下的数据可以包含多行。我在子标题下同步这些多行时遇到了问题。

http://jsfiddle.net/jkkvy86x/

<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中这样做，因此数据/格式很重要。我并不认为在第一列添加另一行包含空白数据的行也会有效，尽管我对解决方案持开放态度。

Answer 1

这不是棱角分明的。顺便说一句，您可以使用virtual吗？

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

但结构我可以做更好的建议。