HTML表格单元格宽度无法固定为16px的问题求助

你的问题并非用户代理样式表覆盖，而是CSS属性设置不严谨导致的。以下是具体修复方案：

关键问题分析 #

• box-sizing: content-box 会让元素宽度仅包含内容，边框和内边距会额外占用空间，导致实际单元格宽度超出预期
• HTML中<td>的width="16px"属性与CSS冲突，且HTML的width属性无需添加单位
• 默认的<td>内边距（用户代理样式）会影响单元格实际显示宽度

修复后的CSS代码 #

td {
    border: 2px solid aqua; /* 简写边框属性，消除冗余设置 */
    width: 16px !important;
    overflow: hidden;
    padding: 0; /* 清除默认内边距，避免占用宽度 */
    box-sizing: border-box; /* 让设置的width包含边框和内边距 */
    text-align: center; /* 可选：让数字居中，视觉更整齐 */
}

tr {
    border: 2px solid aqua;
}

table {
    border: 2px solid aqua;
    color: crimson;
    background-color: black;
    table-layout: fixed;
    box-sizing: border-box;
    width: 400px; /* 示例：若每行25个单元格，25*16=400px，可根据实际行数调整 */
    border-collapse: collapse; /* 可选：合并边框，避免相邻边框叠加占用宽度 */
}

修复后的HTML代码 #

移除<td>上的width属性，统一由CSS控制样式：

<html>
    <head>
        <link rel="stylesheet" href="/static/test_style.css">
        <title>{{ title }} - My Test Site</title>
    </head>
    <body>
       <table>
            <tr>
                {% for data in table %}
                <td>{{ data.info }}</td>
                {% endfor %}
            </tr>
            <tr>
                {% for data in table %}
                <td>{{ data.info }}</td>
                {% endfor %}
            </tr>
            <tr>
                {% for data in table %}
                <td>{{ data.info }}</td>
                {% endfor %}
            </tr>
            <tr>
                {% for data in table %}
                <td>{{ data.info }}</td>
                {% endfor %}
            </tr>
       </table>
    </body>
</html>

额外说明 #

• border-collapse: collapse 可让表格边框合并，避免相邻单元格边框叠加导致的宽度偏差
• 确保table的总宽度为「单元格宽度 × 每行单元格数量」，能让table-layout: fixed更精准地分配宽度

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