html 表格标题 rowspan 到中心标题

Question

我有一个类似 this 的表格:

<table border="1">
<thead>        
    <tr>
        <th colspan="2">Items</th>
        <th colspan="2">Type</th>
        <th colspan="4">Values</th>
        <th colspan="2">Date</th>
    </tr>        
    <tr>
        <th colspan="2"></th>
        <th colspan="2"></th>
        <th colspan="2">Before</th>
        <th colspan="2">After</th>
        <th colspan="2"></th>
    </tr>
</thead>
<tbody></tbody>

在表格的标题中，我希望标题Items、Type 和Date 垂直居中。我尝试在这些 header 上使用 rowspan="2"，但这没有用。有什么想法吗？

Answer 1

使用 rowspan 时，您必须不添加下一行中的列(或与 rowspan 一样多的行)数减一)。

你的 demo, updated :

<table border="1">
    <thead>
        <tr>
            <th rowspan="2">Items</th>
            <th rowspan="2">Type</th>
            <th colspan="4">Values</th>
            <th rowspan="2">Date</th>
        </tr>
        <tr>
            <th colspan="2">Before</th>
            <th colspan="2">After</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

注意:如果删除 Before 和 After colspan，您的Values colspan 可以只是 2。