如何让表格内按钮统一尺寸并自适应文本与浏览器宽度？

我希望表格中的按钮完全填充所在单元格，调整浏览器宽度时能自适应文本。但目前因按钮文本长度不同，部分按钮尺寸更大，我想让所有按钮自动适配其中最大按钮的尺寸。现有CSS方案仅在16:9 1080p分辨率下有效，其他分辨率失效，该如何解决？

要实现所有按钮统一尺寸（匹配最大按钮的内容尺寸）且在任意分辨率下都生效，推荐用CSS Grid替代表格布局——Grid天生支持让所有网格项继承最大项的尺寸，同时保留响应式特性。以下是具体调整方案：

1. 简化结构+Grid布局（优先推荐） #

修改后的HTML #

<div class="essenskarte">
  <button type="submit" name="weinknorze">Pfälzer Weinknorze</button>
  <button type="submit" name="kaesewuerfel">Käsewürfel</button>
  <button type="submit" name="feta">Gegrillter Feta</button>
  <button type="submit" name="winzerkaes">Winzerkäs</button>
  <button type="submit" name="spundekaes">Spundekäs</button>
  <button type="submit" name="saumagen">Saumagen-Carpaccio</button>
  <button type="submit" name="lachs">Geräucherter Lachs</button>
  <button type="submit" name="curry">Curry-Reispfanne</button>
  <button type="submit" name="schnitzel">Mailänder Schnitzel</button>
  <button type="submit" name="jaegerschnitzel">Jägerschnitzel</button>
  <button type="submit" name="kroketten" style="background-color: rgb(255, 226, 80)">Kroketten</button>
  <button type="submit" name="fleischkloesse">Fleischklöße</button>
  <button type="submit" name="schweinebaeckchen">Schweinebäckchen</button>
</div>

修改后的CSS #

.essenskarte {
  width: 100%;
  display: grid;
  /* 自动适配列数，每列宽度至少容纳最长按钮文本，剩余空间均分 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  /* 所有行高度统一，匹配最高的按钮 */
  grid-auto-rows: 1fr;
  /* 按钮之间的间距（替代原按钮的margin） */
  gap: 10px;
  padding: 5px;
}

.essenskarte button {
  color: rgb(255, 255, 255);
  background-color: coral;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  /* 让文本垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 4px double #cccccc;
  font-size: 90%;
  padding: 10px;
  cursor: pointer;
  margin: 0;
}

核心原理 #

• minmax(min-content, 1fr)：保证每列宽度不会小于最长按钮文本的最小宽度，同时在浏览器宽度足够时自动均分剩余空间，实现自适应。
• grid-auto-rows: 1fr：强制所有行的高度等于最高按钮的高度，确保所有按钮高度一致。
• 用Grid的gap控制按钮间距，避免原margin导致的布局偏移问题。

2. 保留表格结构的替代方案（适合有语义需求的场景） #

如果必须保留表格结构，可调整如下CSS：

.essenskarte {
  width: 100%;
  border-collapse: collapse;
  /* 去掉fixed布局，让单元格尺寸由内容决定 */
  table-layout: auto;
}

.essenskarte td {
  /* 让所有单元格宽度统一（基于最大内容） */
  width: 1%;
  vertical-align: top;
  padding: 5px;
}

.essenskarte button {
  color: rgb(255, 255, 255);
  background-color: coral;
  width: 100%;
  /* 用min-height代替height:100%，适配最高按钮的高度 */
  min-height: 100%;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 4px double #cccccc;
  font-size: 90%;
  padding: 10px;
  cursor: pointer;
  margin: 0;
}

核心原理 #

• td设置width:1%会触发浏览器让所有单元格自动调整为最大内容的宽度。
• min-height:100%保证按钮填满单元格高度，同时适配最长文本的高度。

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