按钮居中需同时解决vertical-align、height基准和box-sizing三问题：td设vertical-align: middle且明确height，button用display: block或flex+align-items/justify-content，并加box-sizing: border-box。
按钮在里不居中？先看vertical-align和display
表格单元格默认vertical-align: middle，但button是inline-block元素，其内部文字基线与td的中线并不完全重合，视觉上常偏高或偏低。单纯设height: 100%没用，得配合对齐控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
td显式设置vertical-align: middle（别依赖默认）
- 把按钮
display改为block或flex，避开inline-block的基线干扰
- 若用
flex，加align-items: center; justify-content: center确保内容真正居中
- 避免用
line-height硬调——它只对纯文本有效，对button内含图标+文字的场景不可靠
按钮高度参差不齐？根源在没统一高度基准
各td高度由自身内容撑开，按钮文本长短不同 → 单元格高度不同 → 按钮看起来“没对齐”。这不是按钮的问题，是父容器没约束。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
table加table-layout: fixed，让列宽/行高行为可预测
- 给
td设明确height（如height: 48px），所有单元格按此拉伸，按钮height: 100%才真正生效
- 移除
td默认padding，改用button自身的padding控制内边距，避免尺寸计算错位
- 禁用
button的margin——它会溢出td边界，破坏height: 100%的渲染逻辑
按钮宽度不填满？检查box-sizing和width计算上下文
width: 100%在td里失效，常见原因是box-sizing未统一，或td本身宽度被内容撑变形。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
button加box-sizing: border-box，确保padding和border包含在width内
-
td需有确定宽度来源：要么首行<col>定义，要么CSS设width，否则width: 100%无参照
- 避免在
button上用padding: 3%——百分比基于父容器宽度计算，在窄屏下纵向padding过小，横向过大，加剧错位
- 若需响应式，优先用
min-width锁定表格最小宽度（如min-width: 768px），防止小屏压缩导致按钮换行撑高
点击后找不到所在行？别用rowIndex，用closest('tr')
动态增删行后，rowIndex会变；内联onclick="handle(this)"难维护且易漏type="button"导致表单意外提交。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
addEventListener绑定事件，this指向按钮，调用this.closest('tr')获取所在行——兼容tbody、嵌套表，不依赖DOM层级深度
- 务必为
button显式写type="button"，否则在form内点击会触发表单提交
- 取单元格数据时，别用
tr.cells[0].textContent——输入框值不在textContent里，改用row.querySelector('input').value
- 排查“点不动”：先查
disabled属性（布尔属性有即生效）、pointer-events: none、JS执行时机是否早于DOM加载
对齐不是调一个text-align就能解决的事。真正卡住人的，往往是td没高度基准、button没box-sizing、事件绑定没用closest——这三处漏掉任何一环，都会让按钮看起来“就是不对齐”。
表格单元格默认vertical-align: middle，但button是inline-block元素，其内部文字基线与td的中线并不完全重合，视觉上常偏高或偏低。单纯设height: 100%没用，得配合对齐控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
td显式设置vertical-align: middle（别依赖默认） - 把按钮
display改为block或flex，避开inline-block的基线干扰 - 若用
flex，加align-items: center; justify-content: center确保内容真正居中 - 避免用
line-height硬调——它只对纯文本有效，对button内含图标+文字的场景不可靠
按钮高度参差不齐？根源在没统一高度基准
各td高度由自身内容撑开，按钮文本长短不同 → 单元格高度不同 → 按钮看起来“没对齐”。这不是按钮的问题，是父容器没约束。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
table加table-layout: fixed，让列宽/行高行为可预测
- 给
td设明确height（如height: 48px），所有单元格按此拉伸，按钮height: 100%才真正生效
- 移除
td默认padding，改用button自身的padding控制内边距，避免尺寸计算错位
- 禁用
button的margin——它会溢出td边界，破坏height: 100%的渲染逻辑
按钮宽度不填满？检查box-sizing和width计算上下文
width: 100%在td里失效，常见原因是box-sizing未统一，或td本身宽度被内容撑变形。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
button加box-sizing: border-box，确保padding和border包含在width内
-
td需有确定宽度来源：要么首行<col>定义，要么CSS设width，否则width: 100%无参照
- 避免在
button上用padding: 3%——百分比基于父容器宽度计算，在窄屏下纵向padding过小，横向过大，加剧错位
- 若需响应式，优先用
min-width锁定表格最小宽度（如min-width: 768px），防止小屏压缩导致按钮换行撑高
点击后找不到所在行？别用rowIndex，用closest('tr')
动态增删行后，rowIndex会变；内联onclick="handle(this)"难维护且易漏type="button"导致表单意外提交。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
addEventListener绑定事件，this指向按钮，调用this.closest('tr')获取所在行——兼容tbody、嵌套表，不依赖DOM层级深度
- 务必为
button显式写type="button"，否则在form内点击会触发表单提交
- 取单元格数据时，别用
tr.cells[0].textContent——输入框值不在textContent里，改用row.querySelector('input').value
- 排查“点不动”：先查
disabled属性（布尔属性有即生效）、pointer-events: none、JS执行时机是否早于DOM加载
对齐不是调一个text-align就能解决的事。真正卡住人的，往往是td没高度基准、button没box-sizing、事件绑定没用closest——这三处漏掉任何一环，都会让按钮看起来“就是不对齐”。
各td高度由自身内容撑开，按钮文本长短不同 → 单元格高度不同 → 按钮看起来“没对齐”。这不是按钮的问题，是父容器没约束。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
table加table-layout: fixed，让列宽/行高行为可预测 - 给
td设明确height（如height: 48px），所有单元格按此拉伸，按钮height: 100%才真正生效 - 移除
td默认padding，改用button自身的padding控制内边距，避免尺寸计算错位 - 禁用
button的margin——它会溢出td边界，破坏height: 100%的渲染逻辑
按钮宽度不填满？检查box-sizing和width计算上下文
width: 100%在td里失效，常见原因是box-sizing未统一，或td本身宽度被内容撑变形。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
button加box-sizing: border-box，确保padding和border包含在width内 -
td需有确定宽度来源：要么首行<col>定义，要么CSS设width，否则width: 100%无参照 - 避免在
button上用padding: 3%——百分比基于父容器宽度计算，在窄屏下纵向padding过小，横向过大，加剧错位 - 若需响应式，优先用
min-width锁定表格最小宽度（如min-width: 768px），防止小屏压缩导致按钮换行撑高
点击后找不到所在行？别用rowIndex，用closest('tr')
动态增删行后，rowIndex会变；内联onclick="handle(this)"难维护且易漏type="button"导致表单意外提交。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
addEventListener绑定事件，this指向按钮，调用this.closest('tr')获取所在行——兼容tbody、嵌套表，不依赖DOM层级深度 - 务必为
button显式写type="button"，否则在form内点击会触发表单提交 - 取单元格数据时，别用
tr.cells[0].textContent——输入框值不在textContent里，改用row.querySelector('input').value - 排查“点不动”：先查
disabled属性（布尔属性有即生效）、pointer-events: none、JS执行时机是否早于DOM加载
text-align就能解决的事。真正卡住人的，往往是td没高度基准、button没box-sizing、事件绑定没用closest——这三处漏掉任何一环，都会让按钮看起来“就是不对齐”。
