按钮居中需同时解决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%没用，得配合对齐控制。

实操建议：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 给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——这三处漏掉任何一环，都会让按钮看起来“就是不对齐”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！