本文介绍一种可靠方法，通过重置默认边距、统一设置宽高为100%、并配合 `height: fit-content` 和 `box-sizing: border-box`，确保不同字体大小的按钮在表格单元格中无间隙地完全撑满。
在 HTML 表格中让按钮（如 <input type="button"> 或 <select>）完全填充其所在 <td> 单元格，看似简单，实则易受浏览器默认样式、行高计算、字体尺寸差异及盒模型影响。尤其当多个单元格内按钮使用不同 font-size（如 150%、200%）时，常见问题包括：按钮上下留白、左右缩进、单元格高度不一致，甚至出现滚动条或内容截断。
核心原因在于：
- <input> 和 <select> 是替换元素（replaced elements），其内部尺寸受 line-height、padding、border 及字体度量（ascent/descent）共同影响；
- 表格行（<tr>）默认采用 table-row 布局，高度由内容“包裹”决定，而不同字号会改变内容基线和行高，导致 height: 100% 失效；
- padding 和 border 若未归零或未纳入盒计算，会额外占用空间。
✅ 正确解决方案需三步协同：
强制单元格与行高自适应内容：
使用 height: fit-content（现代浏览器支持）替代 height: auto 或 100%，使 <td> 和 <tr> 主动收缩/扩展以容纳内部元素真实尺寸。消除所有内外边距与边框干扰：
显式重置 margin: 0、padding: 0，并设置 box-sizing: border-box，确保 width: 100% 和 height: 100% 精确作用于内容区。统一控制表单控件尺寸行为：
对 <input>、<select>、<option> 等统一应用 width: 100%; height: 100%，并禁用默认垂直对齐偏移（可选加 vertical-align: top）。
以下是经验证的完整示例代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, tr, td {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
height: fit-content; /* 关键：让单元格高度贴合内容 */
margin: 0;
padding: 0;
}
td {
/* 确保单元格不因内边距撑开 */
padding: 0;
/* 防止子元素溢出 */
overflow: hidden;
}
input, select, option {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
background: #f9f9f9;
font-family: sans-serif;
box-sizing: border-box; /* 关键：包含 border/padding 在 100% 尺寸内 */
vertical-align: top; /* 消除基线对齐导致的底部空隙 */
}
/* 可选：提升可读性调试用 */
td { background-color: #fff8e1; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><select><option>Lorem i</option><option>Lorem i</option></select></td>
<td><input type="button" value="abcdefghijklmno" style="font-size: 150%"></td>
</tr>
<tr>
<td><select style="font-size: 200%"><option>Lorem i</option><option>Lorem i</option></select></td>
<td><input type="button" value="test"></td>
</tr>
</tbody>
</table>
</body>
</html>⚠️ 注意事项：
- height: fit-content 在旧版 IE 中不支持；若需兼容 IE，可改用 JavaScript 动态计算高度，或改用 Flexbox 替代表格布局（推荐现代项目优先采用 display: grid 或 flex 实现类似表格结构）。
- <option> 标签本身不可样式化，其字体大小由 <select> 继承，因此只需设置 <select> 的 font-size 即可。
- 若按钮文字过长导致换行，建议添加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 控制显示。
总结：真正实现「不同字体大小下按钮完全填充单元格」，关键不在“强行拉伸”，而在于让容器（<td>）准确响应内容尺寸，并让内容（按钮）无干扰地占据全部可用空间。通过 fit-content + border-box + 彻底重置盒模型，即可一劳永逸解决该类布局难题。
