设置table-layout:fixed后仅一列随页面宽度变化的问题排查

你遇到的问题根源在于**table-layout: fixed 属性的错误应用**，以及单元格上不合理的 width: 100% 设定：

• table-layout: fixed 是专门为 <table> 元素设计的布局属性，你现在把它同时加到了 <th>、<td> 甚至 .c_week 这些单元格类上，这不仅无效，还会干扰表格的列宽计算逻辑。
• 所有单元格都设置 width: 100% 会让浏览器的布局计算混乱，在 table-layout: fixed 模式下，浏览器会优先根据第一行单元格的宽度分配列宽，这个错误设置会导致只有某一列被拉伸，其他列无法正确响应宽度变化。

具体修复步骤 #

1. 调整 table-layout: fixed 的作用范围：只给表格本身（.c_calendar）设置这个属性，移除其他元素上的该属性。
2. 清除单元格的 width: 100%：让表格根据指定的列宽规则分配空间。
3. 为列设置统一的宽度比例：你的表格有8列（Week + 周一到周日），可以给每一列设置 width: 12.5%，让它们均匀分配表格总宽度；如果需要Week列更窄，也可以单独给它设置固定宽度，其他列平分剩余宽度。

修正后的CSS代码 #

/* basic style*/
.c_container{ margin:0 auto; width: 80%; height: auto; }
.c_week{ font-weight: bold; background-color: rgba(255,0,0,0.2); }
.c_td:hover{ background-color: #add8e6; }
.c_November{ text-align: center; background-color: #CDCDCD; }
.c_weekdays{ color: black; background-color: #D0F0C0; }

/* 表格核心样式：仅给table设置table-layout:fixed，总宽度100% */
.c_calendar {
  width: 100%;
  table-layout: fixed;
  text-align: center;
  font-size: 20px;
  border:3px solid #000;
  border-collapse: collapse;
  cursor: pointer;
}

/* 单元格样式：移除width:100%，设置统一列宽比例 */
.c_th, .c_td, .c_week {
  width: 12.5%; /* 8列平分100%宽度 */
  text-align: center;
  font-size: 20px;
  border:3px solid #000;
  border-collapse: collapse;
  cursor: pointer;
}

.c_td{ text-align: left; vertical-align: top; font-size: 10px; }
/* markere helg */
.c_weekend{ background-color: #FED8E1; }
/* markerer datoer som ikke er i november */
.c_graydays{ background-color: #D3D3D3; }
/* markere spesielle hendelser*/
.c_expedition, .c_talent, .cr_talent{ background-color: #FFFCBB; }
/* hover*/
.c_expedition .c_expeditiontext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; }
.c_expedition:hover .c_expeditiontext { visibility: visible; }
.c_talent .c_talenttext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; }
.c_talent:hover .c_talenttext { visibility: visible; }
.cr_talent .cr_talenttext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; }
.cr_talent:hover .cr_talenttext { visibility: visible; }

额外优化方案 #

如果希望Week列（第一列）宽度固定，其他列自适应剩余空间，可以修改对应样式：

.c_week {
  width: 80px; /* 固定宽度 */
  font-weight: bold;
  background-color: rgba(255,0,0,0.2);
}
.c_th {
  width: calc((100% - 80px)/7); /* 计算剩余7列的平均宽度 */
}

这样当页面宽度变化时，除了固定的Week列，其他7列会均匀拉伸或收缩，保持布局一致性。

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