如何用CSS强制表格表头（及对应列）突破最小宽度限制？

要让#Day列能缩小到20px，核心是修改表格的布局模式——默认的自动布局会优先保证内容显示，导致自定义宽度失效。按以下步骤调整：

• 给表格添加table-layout: fixed属性，强制表格按照指定列宽分配空间，不再依赖内容自动计算
• 为#Day表头明确设置宽度、最小/最大宽度，避免被其他样式覆盖
• 可选：设置white-space: nowrap确保内容不换行（短内容可不加，但加上更稳妥）

修改后的代码如下：

CSS代码 #

table {
    width: 200px;
    table-layout: fixed; /* 关键属性 */
    border-collapse: collapse; /* 可选，优化边框显示 */
}

th#Day {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    white-space: nowrap;
}

HTML代码 #

<table>
    <tr>
        <th id="Day">Day</th>
        <th>Event</th>
        <th>Time</th>
        <th>Location</th>
        <th>Phone Number</th>
        <th>URL</th>
    </tr>
</table>

原理说明 #

默认的table-layout: auto模式下，浏览器会遍历所有单元格内容计算列的最小宽度，你设置的width:20px会被内容所需的最小宽度覆盖。切换到fixed模式后，表格会直接使用你指定的列宽值，总宽度由table的width控制，多余空间会分配给其他未指定宽度的列。

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