如何在HTML中构建跨越多行的表头？
如何在HTML中构建跨越多行的表头？
提问于 2013-09-08 11:18:00
我想构造一个表，如下所示：
| Major Heading 1 | Major Heading 2 |
| Minor1 | Minor2 | Minor3 | Minor4 |
----------------------------------------------
| col1 | col2 | col3 | col4 |
rest of table ...鉴于TH元素只有一行，我如何构造标题行，如列对齐？分层表格似乎不是一个好的选择，因为列宽不会对齐，而且我也不能在colspan中使用带有TH标签的两行。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-09-08 11:40:00
这就是我在Chrome上测试过的方法(在http://jsfiddle.net/7pDqb/工作)。
th, td { border: 1px solid black }<table>
<thead>
<tr>
<th colspan="2">Major 1</th>
<th colspan="2">Major 2</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2013-09-08 13:37:09
您是否无意中使用了rowspan而不是colspan？还是你不小心忘了一个结束的</tr>标签？
在tvanfosson回答的基础上，我会将scope attribute on the th elements用于语义和accessibility目的：
th, td { border: 1px solid black }<table>
<thead>
<tr>
<th colspan="2" scope='colgroup'>Major Heading 1</th>
<th colspan="2" scope='colgroup'>Major Heading 2</th>
</tr>
<tr>
<th scope='col'>Minor1</th>
<th scope='col'>Minor2</th>
<th scope='col'>Minor3</th>
<th scope='col'>Minor4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2016-02-04 20:27:45
然而，除了标题单元格跨越多列的情况外，具有跨越两行的标题单元格的表格也非常常见。
下面是一个例子。请参阅下面的col 5和data5：
<table>
<thead>
<tr>
<th colspan="2">Major 1</th>
<th colspan="2">Major 2</th>
<th rowspan="2">col 5</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>这是fiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18680044
复制相关文章
相似问题