Question

我需要一些动态HTML表格的帮助。

我想要达到的目标是......像这样：

+----------+-------------+--------------+-----+
| Column1  | dynamic col | dynamic col2 | etc |
|          |-------------+--------------+-----+
| rowspan2 | col3 | col4 | col3 | col4  | etc |
+----------+------+------+------+-------+-----+

我已经尝试了一些东西，但我唯一的解决方案是这样的：

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th rowspan="2">Column1</th>
      <th colspan="2" *ngFor="let col of columns">dynamic col</th>
    </tr>
    <tr>
      <th colspan="2" *ngFor="let col of columns" >
        <div style="display: inline-block">col3</div>
        <div style="display: inline-block">col4</div>
      </th>
    </tr>
   </thead>
   <tbody>

   </tbody>
</table>

然后尝试围绕2个div进行构建......是否有更好的解决方案？提前谢谢！

Answer 1

您可以通过添加第一行中的Corresponind td - 1和第二行中的2来添加更多列

＆＃13;

td{
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td rowspan="2">Column1</td>
    <!-- This is the first dynamic column title -->
    <td colspan="2">dynamic col </td>
    <!-- This is the second dynamic column title -->
    <td colspan="2">dynamic col 2</td>
    <!-- add another td for each new column -->
  </tr>
  <tr>
    <!-- This is the first dynamic column content -->
    <td>aaa</td>
    <td>aaa</td>
    <!-- This is the second dynamic column content -->
    <td>aaa</td>
    <td>aaa</td>
    <!-- Add 2 more td for each column -->
  </tr>
</table>

＆＃13;

Answer 2

从第二个循环中移除colspan会起作用吗？

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th rowspan="2">Column1</th>
      <th colspan="2" *ngFor="let col of columns">dynamic col</th>
    </tr>
    <tr>
      <th *ngFor="let col of columns">
         col{{index}}
      </th>
    </tr>
   </thead>
   <tbody>

   </tbody>
</table>

动态表colspan列，包含2个静态列

2 个答案: