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)
您必须在标签中使用colspan和rowspan属性的组合<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)
如果您有任何疑问或我误解了任何内容,请告诉我。
快乐编码!
| 归档时间: |
|
| 查看次数: |
7591 次 |
| 最近记录: |