使用CSS Grid可构建灵活响应式表格，通过grid-template-columns、gap和minmax()等特性实现自适应布局，结合媒体查询在小屏下转为堆叠显示，提升可读性。
响应式表格布局在现代网页设计中非常常见，尤其是在数据展示类应用中。使用CSS Grid可以轻松实现灵活、自适应的表格结构，无需依赖复杂的浮动或定位。下面介绍如何通过CSS Grid构建一个真正响应式的表格布局。
CSS Grid提供二维布局能力，允许同时控制行和列。与传统表格（table）不同，Grid不受HTML语义限制，能更自由地定义结构。它天然支持响应式断点控制，适合移动端到桌面端的适配。
关键特性包括：
使用语义化HTML标签提升可访问性，例如div模拟表头与行，保持结构清晰。
立即学习“前端免费学习笔记（深入）”；
<div class="table"> <div class="header">姓名</div> <div class="header">年龄</div> <div class="header">城市</div> <div class="row">张三</div> <div class="row">25</div> <div class="row">北京</div> <div class="row">李四</div> <div class="row">30</div> <div class="row">上海</div> </div>
CSS部分使用Grid划分三列，并设置响应式行为：
该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。
0
.table {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
<p>.header {
font-weight: bold;
background: #f0f0f0;
padding: 10px;
}</p><p>.row {
padding: 10px;
border-bottom: 1px solid #ddd;
}</p>当屏幕变窄时，将每行数据转为垂直排列，提升可读性。利用Grid的重复渲染机制，在小屏下改为单列布局。
@media (max-width: 600px) {
.table {
grid-template-columns: 1fr;
}
<p>.header {
display: none; /<em> 隐藏表头 </em>/
}</p><p>.row {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 8px;
}</p><p>/<em> 可添加伪元素标注字段名 </em>/
.row:nth-child(3n+1):before {
content: "姓名：";
font-weight: bold;
}
.row:nth-child(3n+2):before {
content: "年龄：";
font-weight: bold;
}
.row:nth-child(3n+3):before {
content: "城市：";
font-weight: bold;
}
}</p>这样在手机上，每条记录独立成块，字段前加标签提示，用户更容易理解。
避免列过窄影响阅读，使用minmax()确保每列有最低宽度，同时允许自动换行。
.table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
上述代码含义是：每列最小150px，最大占1份剩余空间。当容器不够容纳新列时，Grid会自动换行生成新行。这种写法特别适合不确定列数或内容长度不一的场景。
基本上就这些。用CSS Grid做响应式表格，结构简洁，维护方便，还能精准控制断点行为。关键是合理利用minmax和auto-fit，再配合媒体查询处理特殊显示需求，就能覆盖大多数设备场景。
以上就是如何使用CSS Grid实现响应式表格布局_网格布局实践的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
960
收藏
