通过重置默认边距、设置 `height: 100%` 和 `width: 100%`，并配合 `table-layout: fixed` 与 `vertical-align: top` 等关键样式，可确保各类表单控件（按钮、下拉框）无论字体大小如何，均严格贴合单元格边界，彻底消除空白间隙。
在 HTML 表格中让按钮或 <select> 元素完全填满单元格看似简单，但实际常因浏览器默认样式、行高计算逻辑（尤其是 font-size 差异引发的 line-height 和 baseline 对齐问题）以及表格自动布局机制而失败。核心症结在于：td 默认采用 vertical-align: middle，且其高度由内容（含内联元素基线）动态决定；当不同单元格内控件字体大小差异显著时，浏览器会为“视觉对齐”预留额外空间，导致控件无法真正撑满。
✅ 正确解决方案需协同控制三层结构：
- 表格层级：启用 table-layout: fixed，禁用自动列宽/行高计算；
- 单元格层级：显式设置 vertical-align: top（避免基线对齐干扰），移除所有默认 padding 和 border-spacing；
- 控件层级：强制 width: 100%; height: 100%，同时重置 margin、padding、border 及 box-sizing。
以下是经验证的完整实现代码（已优化可读性与健壮性）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
table-layout: fixed; /* 关键：禁用自动尺寸计算 */
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
td {
padding: 0; /* 彻底清除内边距 */
vertical-align: top; /* 避免 baseline 对齐导致的额外空隙 */
border: 1px solid #999;
/* 可选：设定最小高度保障一致性 */
min-height: 40px;
}
/* 统一重置所有表单控件 */
input[type="button"],
select,
option {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
background: #f0f0f0;
font-family: inherit;
font-size: inherit;
box-sizing: border-box; /* 确保 padding/border 包含在 100% 尺寸内 */
/* 移除浏览器默认聚焦轮廓（可选） */
outline: none;
}
/* 防止 select 内部文字溢出或截断（部分浏览器需要） */
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><select><option>Lorem i</option><option>Lorem ipsum</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>Dolor sit</option></select></td>
<td><input type="button" value="test"></td>
</tr>
</tbody>
</table>
</body>
</html>⚠️ 关键注意事项：
- table-layout: fixed 是稳定高度的基础——它使列宽由第一行定义，行高由内容（而非整行最大内容）独立决定；
- vertical-align: top 替代默认 middle，可立即消除因字体大小不一致造成的顶部/底部空隙；
- box-sizing: border-box 必须声明，否则 border 或 padding 会超出 100% 宽高；
- 若需支持旧版 IE，建议为 td 添加 height: 1px（触发 hasLayout），但现代项目通常无需；
- 对于 <select>，部分浏览器（如 Safari）可能仍显示微小箭头区域，此时可通过 background: url(...) 自定义下拉图标进一步优化。
总结：填满 ≠ 单纯设 100%，而是需从表格渲染模型出发，切断默认对齐与尺寸推导链，再将控件“锚定”到单元格边界。此方案兼容所有主流浏览器，且对响应式设计友好。
