用不规则多层头构造HTML表
用不规则多层头构造HTML表
提问于 2022-11-02 13:28:30
我想按以下方式构造一张表格：
| Major Heading 1 | Major Heading 2 | Major Heading 3 | Major Heading 4 |
| | Minor1 | Minor2 | Minor1 | Minor2 | | more similar headers ...
--------------------------------------------------------------------------------------
| col1 | col2 | col3 | col4 | col1 | col2 | col3 | col4 |
rest of table ...头有两种类型，一种有子标头，另一种只有单头。我已经尝试过，单标题有行跨度和大跨距是2。对于多级，主标题将有行跨度1和大跨距2，而对于子标头，则是colspan 1和rowspan 1。
我也尝试过在多级标题之后添加嵌套器。但它打破了桌子。有人能给我一些想法，只使用html而不使用任何css来构造表吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-04 15:51:11
针对这个需求，我想出的解决方案是为头和子头维护两行<tr>。和,
所有标头都应该具有相等的rowspan)
- Headers (子头的双头)，没有子头的
- 标头将有
rowspan="2"(带子头的标头的双倍，而带有子头的的标头将有rowspan="1"(相等于子标头的)，必须遵循各自的标头的顺序。
工作实例，
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2" rowspan="2">Head 1</th>
<th colspan="2" rowspan="1">Head 2</th>
<th colspan="2" rowspan="2">Head 3</th>
</tr>
<tr>
<th rowspan="1">Subhead 2.1</th>
<th rowspan="1">Subhead 2.2</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 5</td>
</tr>
</table>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74289966
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号