本文介绍一种可靠方法，通过重置默认边距、统一设置宽高为100%、并配合 `height: fit-content` 和 `box-sizing: border-box`，确保不同字体大小的按钮在表格单元格中无间隙地完全撑满。
在 html 表格中让按钮（如 或
核心原因在于：
- 和
- 表格行（
）默认采用 table-row 布局，高度由内容“包裹”决定，而不同字号会改变内容基线和行高，导致 height: 100% 失效； - padding 和 border 若未归零或未纳入盒计算，会额外占用空间。
✅ 正确解决方案需三步协同：
-
强制单元格与行高自适应内容：
使用 height: fit-content（现代浏览器支持）替代 height: auto 或 100%，使和 主动收缩/扩展以容纳内部元素真实尺寸。 消除所有内外边距与边框干扰：
显式重置 margin: 0、padding: 0，并设置 box-sizing: border-box，确保 width: 100% 和 height: 100% 精确作用于内容区。统一控制表单控件尺寸行为：
对 、以下是经验证的完整示例代码：
⚠️ 注意事项：
- height: fit-content 在旧版 IE 中不支持；若需兼容 IE，可改用 javaScript 动态计算高度，或改用 flexbox 替代表格布局（推荐现代项目优先采用 display: grid 或 flex 实现类似表格结构）。
- 若按钮文字过长导致换行，建议添加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 控制显示。
总结：真正实现「不同字体大小下按钮完全填充单元格」，关键不在“强行拉伸”，而在于让容器（
）准确响应内容尺寸，并让内容（按钮）无干扰地占据全部可用空间。通过 fit-content + border-box + 彻底重置盒模型，即可一劳永逸解决该类布局难题。