如何解决W3验证报错：表格行实际列数超出首行定义的列数

错误原因 #

错误的核心原因是HTML表格规范要求所有行的总列数必须和表头定义的列数完全匹配，你表头只定义了2列，但tbody内的行实际包含3、5列，自然触发验证错误。你写死colspan="100"也没用，因为实际使用列数远小于100，验证器仍会判定列数不匹配。

推荐解决方案（适配价格数量不固定场景） #

将所有价格项放在同一个<td>内，用块级元素（比如<div>）包裹每个价格，从根源上保证表格永远只有2列，视觉效果和你原来的实现完全一致，也能100%通过W3验证。

修改后的HTML代码 #

<table>
    <thead>
        <tr>    
            <th scope="col">Dates</th>
            <th scope="col">Price per week</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>00/00/00 - 00/00/00</td>
            <td>
                <div>lorem $000</div>
                <div>lorem $000</div>
                <div>lorem $000</div>
                <div>lorem $000</div>
            </td>
        </tr>
        <tr>
            <td>00/00/00 - 00/00/00</td>
            <td>
                <div>lorem $000</div>
                <div>lorem $000</div>
            </td>
        </tr>
    </tbody>
</table>

调整后的CSS代码 #

只需要删除原来的table td:not(:first-of-type) { display: block; }规则即可，因为价格用<div>包裹本身就是块级元素，会自动垂直排列，其余原有样式完全保留：

table{
    border-collapse: collapse;
}
table *{
    vertical-align: top;
}
thead{
    border-bottom: 1px solid #a1afba;
}
th,td {
    padding: 3px 15px 3px 0;
}
/* 如果需要调整价格之间的间距，可以加下面这条规则 */
td > div {
    margin: 3px 0;
}
td:last-of-type{
    padding-bottom: 20px;
}

备选方案（要求每个价格对应单独列的场景） #

如果业务要求每个价格对应单独的表格列，就在页面渲染时先统计当前表格最多的价格数量，给表头的「Price per week」设置和最大价格数一致的colspan属性，所有行不足最大列数的位置要么补空<td>，要么给最后一个<td>加colspan补全列数即可通过验证。

内容的提问来源于stack exchange，提问作者Charly