HTML合并行列表格优化：实现三列等宽与末3行居中

关键改动说明 #

• 修正表格宽度样式：仅给<table>设置固定宽度，避免th/td继承错误宽度
• 为政党三列设置等宽：通过CSS选择器定位第二行的三个表头单元格，让它们均分宽度
• 为最后三行设置内容居中：选中表格第3行及以后的行，统一设置单元格内容居中

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 600px;
        }
        th, td {
            border: 1px solid black;
            padding: 2px;
            word-spacing: 0px;
        }
        /* 让政党三列等宽 */
        table tr:nth-child(2) th {
            width: calc(100% / 3);
        }
        /* 让最后三行内容居中 */
        table tr:nth-child(n+3) td {
            text-align: center;
        }
        /* 可选：让第一列的rowspan单元格保持左对齐 */
        table tr:nth-child(3) td[rowspan] {
            text-align: left;
        }
    </style>
</head>
<body>
<caption><b>Do you favor or oppose increasing the minimum wage?</b></caption>
<table>
    <tr>
        <th colspan="2" rowspan="2">Today's Opinion Poll Question</th>
        <th colspan="3">Political Party</th>
    </tr>
    <tr>
        <th>Democrat</th>
        <th>Republican</th>
        <th>Independent</th>
    </tr>
    <tr>
        <td rowspan="3">Do you favor or oppose?</td>
        <td>Favor</td>
        <td>70%</td>
        <td>35%</td>
        <td>55%</td>
    </tr>
    <tr>
        <td>Oppose</td>
        <td>25%</td>
        <td>60%</td>
        <td>30%</td>
    </tr>
    <tr>
        <td>Unsure</td>
        <td>5%</td>
        <td>5%</td>
        <td>15%</td>
    </tr>
</table>
</body>
</html>

细节解释 #

1. 表格宽度修正：原代码将width:600px同时应用给table、th、td，这会导致每个单元格被强制设为600px，完全破坏布局。调整后仅给table设置宽度，th和td的宽度由表格布局自动分配。
2. 三列等宽实现：使用tr:nth-child(2)定位包含政党名称的表头行，给其中的三个th设置width: calc(100% / 3)，让它们均分所在列组的宽度，确保三列等宽。
3. 内容居中设置：tr:nth-child(n+3)选中表格第3行及以后的所有数据行，设置这些行内的td内容居中；如果希望第一列的“Do you favor or oppose?”保持左对齐，可以保留代码中可选的CSS规则，单独设置该单元格的对齐方式。

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