使用CSS Grid和媒体查询可实现响应式表格布局，桌面端保持多列样式，移动端通过grid-template-columns: 1fr将行转为垂直堆叠，结合data-label显示表头提升可读性与可访问性。
在现代网页设计中，表格内容常常需要在不同设备上清晰可读。使用CSS Grid和媒体查询可以高效实现响应式表格布局，让表格在桌面端保持传统样式，在移动端则自动调整为更易浏览的形式。
使用CSS Grid创建基础表格结构
Grid布局提供了强大的二维控制能力，适合重构表格的显示方式。通过将容器设为display: grid，可以自定义行与列的行为。
例如，将原本的 这样做的优势是摆脱了传统表格对 当屏幕变窄时，传统的多列表格会难以阅读。通过媒体查询切换布局模式，可以让每条数据垂直堆叠展示。 此时每个表格行变成一个独立的网格容器，所有单元格纵向排列，提升移动端可读性。 在移动视图中，原始表头信息可能丢失。建议为每个单元格添加对应的标题提示，比如用 这样即使没有可见的表头，用户也能清楚知道每个值对应的信息类型。 基本上就这些。结合Grid的灵活布局能力和媒体查询的断点控制，再辅以语义化标记和视觉优化，就能构建出真正响应式的表格体验。关键是根据实际内容调整断点和堆叠逻辑，确保信息始终清晰易读。结构替换为语义化的
或保留原标签并应用Grid：
.responsive-table {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: #ddd;
width: 100%;
}
.table-row {
display: contents;
}
.table-cell {
padding: 12px;
background: white;
border-bottom: 1px solid #eee;
}
和 的严格嵌套限制，同时能自由控制每一项的位置。
利用媒体查询适配小屏幕
.responsive-table {
grid-tem
plate-columns: 1fr;
}
.table-row {
display: grid;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
}
.table-cell {
text-align: center;
border-bottom: 1px dashed #eee;
}
.table-cell:last-child {
border-bottom: none;
}
}
增强可访问性与标签映射
data-label属性保存列名，并通过伪元素显示。
zhangsan@example.com
.table-cell::before {
content: attr(data-label) ": ";
font-weight: bold;
display: inline-block;
margin-bottom: 4px;
}
