表格边框不统一需先设 border-collapse: collapse；单元格间距靠 padding 而非 margin；斑马纹用 tbody tr:nth-child(odd)；响应式需 table-container 包裹并慎用 fixed 表头。
表格边框颜色不统一？用 border-collapse 和类名批量控制
默认浏览器渲染下，<table> 的 border 会重复叠加（尤其是 <td> 和 <th> 各自带边框），导致边框变粗、颜色错位。必须先设 border-collapse: collapse，否则任何类名控制都难以生效。
推荐在基础表格类中统一写死：
.table {
border-collapse: collapse;
width: 100%;
}
.table th,
.table td {
border: 1px solid #d1d5db; /* 统一灰边框 */
padding: 0.5rem 0.75rem;
}注意：不要只给 <table> 设 border，而忽略单元格的 border —— 那样会导致内边框消失或断开。
行间距靠 padding，不是 margin
表格单元格不支持 margin（会被忽略），所有“行高”“列宽”“视觉间距”都得靠 padding 控制。常见错误是给 <tr> 加 margin 或试图用 line-height 拉高整行 —— 这只会撑开文字行距，不会增加单元格上下留白。
立即学习“前端免费学习笔记（深入）”；
-
padding值建议用rem或em，方便响应式缩放 - 若需首尾行额外留白，可单独加类如
.table--spaced，对th:first-child和td:last-child微调padding-top/padding-bottom - 避免在
th和td上用不同padding值，否则表头与数据列容易错位
深色边框/斑马纹和 hover 效果别硬写多层选择器
想让表格有现代感？直接复用已定义的边框色变量，而不是临时写 #37414f 或 rgba(0,0,0,0.1)。比如：
.table-striped tbody tr:nth-child(odd) {
background-color: #f9fafb;
}
.table-hover tbody tr:hover {
background-color: #f0f4f8;
border-color: #9ca3af; /* 复用同一色系，不另起新值 */
}关键点：
- 斑马纹用
tbody tr:nth-child(odd)，别用tr:nth-of-type(odd)（会被thead干扰） - hover 边框色建议比默认色略深一级，但保持同一
hsl()色相，避免跳脱 - 如果用了 CSS 变量（如
--border-color: #d1d5db），所有边框都应引用它，后续换主题只需改一处
响应式表格常被忽略的两个断点行为
小屏下表格横向溢出是高频问题。光加 overflow-x: auto 不够——它只解决滚动，不解决可读性。真正要处理的是：
- 给
<table>包一层<div class="table-container">，并设overflow-x: auto和min-width: min-content - 移动端禁用
border-collapse: collapse改为separate，再配合border-spacing: 0+ 单元格border-bottom模拟“行分隔”，这样左右滑动时不会漏边框 - 慎用
font-size: 0.875rem缩小文字：可能影响可访问性；优先用padding: 0.375rem 0.5rem压缩内边距
最易被忽略的一点：当表格有 fixed 表头时，border-collapse 在 Safari 下可能失效，此时必须显式给 thead th 和 tbody td 分别设 border-bottom 和 border-top 来对齐。
