HTML表格嵌套colspan设置异常，第二层colspan不生效如何解决？

问题原因 #

你现有代码存在两个核心配置错误，导致嵌套colspan不生效：

• 首列「采用的主要技术」对应的<th>设置了rowspan="2"，但你的thead总共有3行结构，必须改为rowspan="3"才能跨满三行，不会出现列错位
• 第一行的总统计标题<th>错误设置了colspan="10"，实际CIG分类下有4列、Non-CIG分类下有4列，合计只有8个子列，需要把这个值改为8和实际列数匹配

修正后完整代码 #

<table class="table table-bordered" width="100%" border="1" cellpadding="3" cellspacing="0">
    <thead>
        <tr class="bg-dark text-white" align="center">
            <!-- 调整rowspan为3，跨满3行表头 -->
            <th rowspan="3" class="text-center">{{ __('Major Technology Adopted') }}</th>
            <!-- 调整colspan为8，匹配后面所有子列总数 -->
            <th colspan="8" class="text-center">{{ __('No Of Farmers Adopted Technology:Since Inception To Date') }}</th>
        </tr>
        <tr class="bg-dark text-white" align="center">
            <th colspan="4" class="text-center">{{ __('CIG') }}</th>
            <th colspan="4">{{ __('Non-CIG') }}</th>
        </tr>
        <tr align="center" class="bg-dark text-white">
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
        </tr>
    </thead>
    <tbody>
        <!-- 这里补充你自己的表格数据行即可 -->
    </tbody>
</table>

调整后所有colspan、rowspan的数值都和实际行列结构匹配，就能渲染出你预期的嵌套表头效果。

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