本文介绍通过 css 表格布局与弹性约束机制，实现多行多列按钮在不同屏幕下保持等宽、等高、自动填充单元格且响应式对齐的完整方案。

本文介绍通过 css 表格布局与弹性约束机制，实现多行多列按钮在不同屏幕下保持等宽、等高、自动填充单元格且响应式对齐的完整方案。

在构建菜单式交互界面（如餐厅电子点餐表、功能快捷面板）时，常需将按钮嵌入 HTML 表格中，并要求所有按钮严格填满各自 单元格，同时在浏览器缩放或窗口调整时保持视觉一致性——即：最长文本的按钮决定整行（或整列）的高度基准，其余按钮自动匹配该高度；宽度则随表格列宽均分并响应式伸缩。

仅靠 width: 100%; height: 100% 并不能可靠生效，原因在于：

• 是替换元素（replaced element），其默认 display: inline-block，受 line-height、vertical-align 和父容器 table-cell 的渲染规则影响；
• table-layout: fixed 虽可固定列宽分配逻辑，但若未设定最小约束，小屏下 宽度压缩会导致文本换行撑高按钮，破坏行内等高；
• padding: 3% 中的百分比基于包含块宽度计算，在窄屏下纵向 padding 过小，横向过大，加剧尺寸不一致。

✅ 正确解法是 “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 更稳妥。

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 驱动，兼顾设计一致性与用户体验。