Bootstrap 4表格如何将<td>宽度设为8px？默认最小仅25px

问题根源在于Bootstrap默认表格采用table-layout: auto布局，会根据内容自动调整列宽，同时浏览器对空<td>有默认最小宽度限制，导致设置的8px宽度无法生效。可以通过以下步骤解决：

完整代码示例 #

HTML

<table class="table table-fixed">
    <tbody>
        <tr>
            <td class="bg-danger status-indicator"></td>
            <td>red</td>
            <td>orange</td>
        </tr>
    </tbody>
</table>

CSS

/* 固定表格布局，强制遵循设置的列宽 */
.table-fixed {
    table-layout: fixed;
    width: 100%;
}

/* 自定义窄列样式 */
.status-indicator {
    width: 8px;
    min-width: 8px;
    max-width: 8px;
    padding: 0 !important; /* 覆盖Bootstrap默认内边距 */
    border: none !important; /* 可选：移除边框让色块更简洁 */
}

关键说明 #

• table-layout: fixed：让表格优先使用手动设置的列宽，而非根据内容自动调整，这是实现窄列的核心。
• 移除内边距：Bootstrap的.table td默认有.75rem内边距，会撑开单元格宽度，必须强制覆盖。
• 锁定宽高：通过min-width和max-width避免浏览器默认最小宽度限制干扰。

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