html - 将一个表头分成两行
问题描述
我有一张表,其中一个表头必须有两行,第二行也必须分为 4 列。简而言之,必须将一个头标签分成 2 行标签,然后再将第 2 行分成 4 个子标签。
<table class="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>A value</td>
<td>B value</td>
<td>C1 C2 C3 C4 value</td>
<td>D value</td>
</tr>
</tbody>
</table>
解决方案
你可以这样做
<table>
<col>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Mars</th>
<th colspan="2" scope="colgroup">Venus</th>
</tr>
<tr>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
</tr>
<tr>
<th scope="row">Teddy Bears</th>
<td>50,000</td>
<td>30,000</td>
<td>100,000</td>
<td>80,000</td>
</tr>
<tr>
<th scope="row">Board Games</th>
<td>10,000</td>
<td>5,000</td>
<td>12,000</td>
<td>9,000</td>
</tr>
</table>
推荐阅读
- kotlin - Corda 节点监控工具或资源管理器,可用于显示除 Corda 资源管理器以外的见解
- asp.net-mvc - 支付处理期间 ProtectPay 托管支付页面超时
- python - Python3 TypeError:只能将列表(不是“str”)连接到列表
- android - 对大量 caffe2 库的未定义引用
- java - 每次按取消选项时,我都想返回第一个对话框
- elasticsearch - 如何在 Elasticsearch 中一次创建多个索引?
- python - 使用 Groupby 和 sum 在 pandas 中重复操作
- xml - 替换 XSLT 中的“新行”
- download - 如何使用 wget 从不同的目录下载一些带有一些关键字的特定文件?
- rust - 如何实现管道/撰写功能?