如何让表格内按钮自动对齐并统一尺寸（基于内容自适应的等高宽布局）

✅ 正确解法是 “CSS 表格 + 最小宽度锚定 + 内容安全换行” 三重保障：

1. 强制表格最小宽度，锁定列宽基准

为 .essenskarte 添加 min-width，确保在小屏下仍维持足够空间让所有按钮文本自然显示（避免极端压缩导致高度突变）：

.essenskarte {
  width: 100%;
  table-layout: fixed;         /* 列宽由第一行 <td> 或 CSS width 决定 */
  border-collapse: collapse;
  min-width: 820px;           /* 关键！根据最长按钮文本（如 "Saumagen-Carpaccio"）实测设定 */
  /* 可选：max-width: 1440px; 防止超大屏过度拉伸 */
}

? 提示：min-width 值应基于最长按钮文本 + 内边距 + 边框综合测算。例如本例中 "Saumagen-Carpaccio"（18字符）在 90% 字号下约需 160px 宽，5 列 × 160px = 800px，再加边框/间距余量 → 设为 820px 更稳妥。

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

下载

2. 优化按钮样式：消除默认干扰，强制继承尺寸

.essenskarte button {
  display: block;              /* 避免 inline-block 换行间隙 */
  width: 100%;                 /* 填满 td 宽度 */
  height: 100%;                /* 填满 td 高度（需 td 有明确高度或内容撑开） */
  min-height: 60px;            /* 保障最小可点击区域，提升 UX */
  box-sizing: border-box;      /* padding/border 包含在 width/height 内 */
  padding: 12px 8px;           /* 改用 px/em 替代 %，避免响应式失真 */
  font-size: 0.9rem;
  text-align: center;
  word-break: break-word;      /* 比 word-wrap 更可控的断行策略 */
  white-space: normal;         /* 允许换行（默认 nowrap 会溢出） */
  border: 4px double #cccccc;
  border-radius: 10px;
  background-color: coral;
  color: white;
  cursor: pointer;
  margin: 0;                   /* 移除 margin，避免脱离 td 边界 */
  outline: none;               /* 移除焦点环干扰视觉统一性 */
}

3. （进阶）为 显式设置高度，确保跨行等高

若需严格保证每行所有按钮绝对等高（尤其当某行存在多行文本按钮时），可添加：

.essenskarte td {
  vertical-align: middle;      /* 文本垂直居中 */
  height: 80px;                /* 固定行高，所有按钮 height: 100% 即继承此值 */
}

或使用更灵活的 min-height：

.essenskarte td {
  min-height: 72px;
  vertical-align: middle;
}

✅ 最终效果验证要点

• ✅ 所有按钮宽度 = 所在 宽度（列宽均分）
• ✅ 所有按钮高度 = 当前行最高按钮高度（由 height: 100% + table-cell 渲染机制保证）
• ✅ 小屏下表格整体缩小，但按钮文字自动换行，高度同步增长，无错位
• ✅ 大屏下 min-width 不触发，width: 100% 自然扩展，保持比例协调

⚠️ 注意事项

• 避免在 上使用 margin（已移至 td 外层控制间距更合理）；
• 若需支持 IE11，请确认 word-break: break-word 兼容性（IE 使用 word-wrap: break-word）；
• 如后续需添加图标或徽标，建议用 ::before 伪元素 + flex 布局替代纯文本，进一步提升可控性；
• 对于无障碍访问，务必保留 type="submit" 或添加 role="button" 与 aria-label。

通过以上结构化调整，您将获得一套稳定、可维护、真正响应式的表格按钮系统——无需 JavaScript，纯 CSS 驱动，兼顾设计一致性与用户体验。