表格列宽固定需用 table-layout: fixed + 显式列宽，操作列用 white-space: nowrap 和 flex 布局对齐按钮，行高亮用 event.target.closest('tr') 安全获取并独立 class 控制，响应式滚动需 thead sticky + 外层 overflow-x:auto。
表格列宽怎么固定不随内容撑开
默认 <table> 会根据单元格内容自动调整列宽，导致任务标题过长时整列变宽、破坏布局。关键不是用 width 属性硬设像素值（它在现代浏览器中已不推荐且易失效），而是靠 CSS 的 table-layout: fixed + 显式设置列宽。
- 给
<table>加style="table-layout: fixed; width: 100%;" - 为每列
<col>或第一行<th>设置宽度，例如<col style="width: 40px;">（序号列）、<col style="width: 200px;">（状态列） - 对内容溢出的单元格（如任务标题）加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
如何让“操作”列按钮对齐且不换行
操作按钮（编辑/删除/完成）常因文字长度或空格错位，或被折成两行。根本原因是默认 td 内容按文本流渲染，没做约束。
- 给操作列所有
<td>加style="white-space: nowrap;"，阻止换行 - 用
<div style="display: flex; gap: 8px;">包裹按钮，比纯空格或<span>更可控 - 避免在按钮里写中文文字（如“删除”），改用图标 +
aria-label，减少宽度波动 - 若用
<button>，记得重置margin和padding，否则不同浏览器默认值不一致
点击某行高亮但不影响排序和选中逻辑
用户点哪行就高亮哪行，看似简单，但直接给 <tr> 加 onclick 并切换 class 容易和后续的 checkbox 多选、拖拽排序等功能冲突。
- 监听
click事件时，用event.target.closest('tr')获取目标行，避免点击按钮时误触发整行高亮 - 高亮用独立 class（如
selected-row），不要覆盖:hover效果，两者可共存 - 清除之前高亮前，先排除当前点击行本身（防止重复 toggle），用
document.querySelectorAll('tr.selected-row').forEach(r => r.classList.remove('selected-row')) - 如果表格支持多选，高亮状态应与 checkbox 状态分离——高亮只是视觉反馈，不改变数据模型
响应式下表格横向滚动但表头不随动
小屏设备上列太多，横向滚动是刚需，但原生 <table> 滚动时 <thead> 会跟着滚走，用户看不到字段含义。
立即学习“前端免费学习笔记（深入）”；
- 不能只靠
overflow-x: auto包裹整个 table——这会让表头也滚动 - 正确做法：用外层容器设
overflow-x: auto，内部再套一个<div>包住<tbody>，而<thead>单独放在外面并设position: sticky; top: 0; -
<thead>必须有明确高度（如height: 48px;），否则 sticky 行为不稳定 - 测试时注意 iOS Safari 对
sticky支持较弱，需加-webkit-sticky前缀
table-layout: fixed 和 sticky 的组合生效前提：前者要求至少有一列有明确宽度，后者要求父容器有非 auto 的 height 或 max-height。没设这两点，样式看起来就“不起作用”。 
