如何解决HTML表格中c列标题无法与下方对应数据对齐的问题

问题原因 #

• HTML表格结构语法错误：所有<th>表头元素必须包裹在<tr>行标签内，缺失<tr>会导致浏览器自动修正结构时列数计算异常，是表头错位的核心原因之一。
• 错误使用colspan属性：你的表格总共只有3列（对应a、b、c三个表头），但给b列的<td>设置了colspan="30"，强制该单元格横跨30列，直接挤占了c列的空间，导致c列表头被挤压到和b列表头粘连。
• 标签闭合顺序错误：<form>标签写在<td>标签内部，却在</td>之后才闭合</form>，不符合HTML嵌套规范，会干扰浏览器对表格单元格结构的解析。

修复方案 #

首先调整CSS，可选添加边框合并属性优化显示效果：

table {
  border-collapse: collapse; /* 合并单元格边框，避免双边框显示 */
  width: 100%; /* 可根据需求调整表格总宽度 */
}
table,th,td{
  padding: 20px;
  border: 10px solid navy;
}
/* 若需要调整b列宽度，可添加以下样式自定义占比 */
th:nth-child(2), td:nth-child(2) {
  width: 60%;
}

修复后的HTML代码：

<body>
    <table>
        <thead>
            <tr>
                <th>a</th>
                <th>b</th>
                <th>c</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Apples</td>
                <td>
                    <form>
                        <input type="checkbox" name="50g"/>0.5Kg
                        <input type="checkbox" name="50g"/>1Kg
                        <input type="checkbox" name="bag"/>Paper Bag?
                    </form>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>Apples</td>
                <td>
                    <form>
                        <input type="checkbox" name="50g"/>0.5Kg
                        <input type="checkbox" name="50g"/>1Kg
                        <input type="checkbox" name="bag"/>Paper Bag?
                    </form>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>Apples</td>
                <td>
                    <form>
                        <input type="checkbox" name="50g"/>0.5Kg
                        <input type="checkbox" name="50g"/>1Kg
                        <input type="checkbox" name="bag"/>Paper Bag?
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</body>

如果确实有合并单元格的需求，需要保证每一行的总列数和表头的总列数一致，不要设置超出实际列数的colspan值。

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