Bootstrap 表头组

Joh*_*hns 1 html-table twitter-bootstrap twitter-bootstrap-3 bootstrap-4

我需要有关如何在引导表中创建图片表组 highlet 的简单建议来帮助我。我想要图片中的成人、儿童、婴儿,就像引导程序中的表格一样。

<table class="table display product-overview mb-30">
  <thead>
    <tr>
      <th>Agent Name</th>
      <th>Groups Count</th>

    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="result in getresult">
      <td>{{result.Agent}}</td>
      <td>{{result.Groups}}</td>
    </tr>

  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

agi*_*lla 5

您必须在标签中使用colspanrowspan属性的组合<th>


像这样:( 编辑所有列和示例行)

<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table class="table display product-overview mb-30">
    <tr>
      <th rowspan="2">Agent Name</th>
      <th rowspan="2">Groups Count</th>
      <th colspan="2">Adult</th>
      <th colspan="2">Child</th>
      <th colspan="2">Infant</th>
      <th rowspan="2"></th>
      <th rowspan="2">Total</th>
      <th rowspan="2">Trans</th>
      <th rowspan="2">Total Transp</th>
      <th rowspan="2">Grand Total</th>
    </tr>
    
    <tr>
      <th>Visa</th>
      <th>Total</th>

      <th>Visa</th>
      <th>Total</th>

      <th>Visa</th>
      <th>Total</th>
    </tr>
    
    <tr>
      <td></td>
      <td></td>
      <td>147</td>
      <td>1537</td>
      <td>69</td>
      <td>15870</td>
      <td>28</td>
      <td>6510</td>
      <td>1634</td>
      <td>376940</td>
      <td>1606</td>
      <td>0</td>
      <td>376940</td>
    </tr>
  </table>

</body>

</html>
Run Code Online (Sandbox Code Playgroud)

如果您有任何疑问或我误解了任何内容,请告诉我。

快乐编码!