如何让行列数不同的HTML表格尺寸一致并实现行列合并

问题1：让行列数不同的表格保持相同整体尺寸 #

直接设置width和height不生效，是因为表格会自动根据内容/单元格数量调整尺寸。要强制固定尺寸，需给表格添加table-layout: fixed，同时给所有元素设置box-sizing: border-box，避免padding和border撑大实际尺寸。

问题2：让第二个表格最后一行单元格尺寸与其他行一致 #

默认表格单元格会均分可用空间，要统一所有单元格尺寸，需按最多的列数/行数计算单元格宽高，同时给行列数少的表格补充空单元格/空行，确保结构统一。

问题3：第一个表格第一行与其余行第一列关联 #

通过CSS选择器给目标单元格设置统一样式，实现视觉上的关联；如果需要语义关联，可将第一列单元格替换为<th>标签。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box; /* 确保padding、border不影响元素实际尺寸 */
        }
        table {
            border-collapse: collapse;
            border: 1px solid black;
            width: 200px;
            height: 300px;
            table-layout: fixed; /* 强制固定布局，忽略内容自动调整尺寸 */
            margin: 10px 0; /* 可选：给表格添加间距，避免重叠 */
        }
        td {
            border: 1px solid black;
            padding: 10px;
            width: calc(200px / 5); /* 按最多列数（5列）均分宽度 */
            height: calc(300px / 3); /* 按最多行数（3行）均分高度 */
            text-align: center; /* 可选：内容居中，视觉更整齐 */
        }
        /* 给第一个表格的第一列设置统一样式，实现关联 */
        .tabela:first-child td:first-child {
            background-color: #f5f5f5;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table class="tabela">
        <col><col><col><col><col> <!-- 定义5列，确保列结构统一 -->
        <tr>
            <td></td>
            <td></td>
            <td>DoM</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>100</td>
        </tr>
    </table>
    <table class="tabela">
        <col><col><col><col><col> <!-- 补充到5列 -->
        <tr>
            <td></td>
            <td></td>
            <td>Szkola</td>
            <td></td>
            <td></td> <!-- 补充空单元格 -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> <!-- 补充空单元格 -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> <!-- 补充空行，确保行数到3行 -->
        </tr>
    </table>
    <table class="tabela">
        <col><col><col><col><col> <!-- 补充到5列 -->
        <tr>
            <td>200</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> <!-- 补充空单元格 -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> <!-- 补充空行 -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> <!-- 补充空行 -->
        </tr>
    </table>
</body>
</html>

关键修改说明 #

• 用table-layout: fixed强制表格固定尺寸，不受内容影响；
• 通过calc()按最大行列数计算单元格宽高，同时补充空单元格/空行让所有表格结构统一，确保单元格尺寸一致；
• 用CSS选择器给第一个表格的第一列设置统一样式，实现视觉上的关联。

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