使用CSS Grid与nth-child实现响应式表格，通过grid-template-columns适应屏幕尺寸，display: contents保留网格布局，结合:nth-child(even/odd)添加斑马纹背景，提升可读性与维护性。
在现代网页开发中，响应式表格不仅需要适配不同屏幕尺寸，还要具备良好的可读性。通过结合 CSS 的 Grid 布局 与 nth-child 伪类，我们可以轻松实现交替行背景色的响应式表格，同时保持结构清晰、维护方便。
使用 Grid 实现响应式表格布局
传统表格（table）在小屏幕上容易溢出或难以阅读。采用 display: grid 可以将任意容器变成网格结构，便于控制列宽和响应式断点。
示例如下：
.responsive-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
padding: 10px;
}
立即学习“前端免费学习笔记（深入）”；
其中 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 表示：每列最小 120px，最大自动均分容器宽度，超出则换行，适合移动端。
用 nth-child 设置交替行背景色
虽然使用了 Grid，我们仍可通过语义化结构（如 div 模拟行）来应用 :nth-child(even/odd) 实现斑马纹效果。
假设每个“行”用带有 .table-row 类的 div 表示：
.table-row {
display: contents; /* 让子元素直接参与网格布局 */
}
.table-cell {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.table-row:nth-child(even) .table-cell {
background-color: #f9f9f9;
}
.table-row:nth-child(odd) .table-cell {
background-color: #ffffff;
}
注意：display: contents 使 .table-row 不占据布局流，其子元素直接受 grid 控制，同时保留选择器路径用于样式继承。
结合 template-rows 控制行高与视觉节奏
CSS Grid 的 grid-template-rows 可显式定义每行高度，增强一致性，尤其适用于固定行数的场景。
例如：
.responsive-table {
grid-template-rows: repeat(6, auto); /* 预设6行，每行自适应高度 */
}
配合 auto-fit 列与 minmax，整个表格在不同设备上都能保持良好对齐和可读性。即使内容动态变化，交替背景依旧准确作用于每一逻辑行。
基本上就这些。通过 Grid 布局替代传统 table，灵活控制列与响应行为，再利用 nth-child 精准添加视觉层次，既能实现美观的斑马纹，又不失响应式能力。关键在于结构语义清晰，样式解耦合理。不复杂但容易忽略细节。
