使用CSS Grid、Flexbox或display: table可实现多列表格布局。1. Grid通过grid-template-columns和gap属性创建响应式表格，列宽自动分配；2. Flexbox用flex容器模拟行布局，适合移动端；3. display: table保留表格样式但语义化较弱；4. 响应式优化建议包括minmax()自适应、隐藏次要列或转卡片布局。Grid最强大，Flexbox易上手，display: table兼容性好。
实现多列表格布局，不一定非得使用HTML的
table
元素。现代CSS提供了多种更灵活、语义化更强的方法，比如使用
display: table
系列属性或更推荐的
grid
和
flexbox
布局。下面介绍几种实用方式。
1. 使用 CSS Grid 实现多列表格布局
Grid 布局是最适合多列复杂表格的方式，控制行、列非常直观。
示例：创建一个4列的响应式表格布局
<div class="grid-table"> <div class="header">姓名</div> <div class="header">年龄</div> <div class="header">城市</div> <div class="header">职业</div> <div>张三</div> <div>28</div> <div>北京</div> <div>工程师</div> <div>李四</div> <div>32</div> <div>上海</div> <div>设计师</div> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.grid-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background-color: #ddd; border: 1px solid #ccc; } .grid-table > div { padding: 10px; background-color: white; text-align: center; } .header { font-weight: bold; background-color: #f0f0f0; }
优点：列宽自动分配，支持响应式，可轻松调整行列结构。
2. 使用 Flexbox 实现表格行布局
用 Flexbox 模拟表格每行的布局，适合动态内容或移动端适配。
结构示例：
<div class="flex-table"> <div class="flex-row header"> <div class="flex-cell">姓名</div> <div class="flex-cell">年龄</div> <div class="flex-cell">城市</div> <div class="flex-cell">职业</div> </div> <div class="flex-row"> <div class="flex-cell">张三</div> <div class="flex-cell">28</div> <div class="flex-cell">北京</div> <div class="flex-cell">工程师</div> </div> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.flex-table { display: flex; flex-direction: column; border: 1px solid #ccc; } .flex-row { display: flex; } .flex-cell { flex: 1; padding: 10px; border-bottom: 1px solid #eee; text-align: center; } .header .flex-cell { font-weight: bold; background-color: #f0f0f0; }
说明：每一行是横向 flex 容器，每个单元格平均分配宽度（可用
flex-basis
控制不等宽）。
3. 使用 display: table 实现传统表格样式
如果你希望保留语义结构但不用
table
标签，可以用
display: table
模拟。
.table-layout { display: table; width: 100%; border-collapse: collapse; } .table-row { display: table-row; } .table-cell { display: table-cell; padding: 10px; border: 1px solid #ccc; text-align: center; }
HTML 结构：
<div class="table-layout"> <div class="table-row"> <div class="table-cell">姓名</div> <div class="table-cell">年龄</div> <div class="table-cell">城市</div> </div> <div class="table-row"> <div class="table-cell">张三</div> <div class="table-cell">28</div> <div class="table-cell">北京</div> </div> </div>
注意：
display: table
兼容性好，但在响应式设计中不如 Grid 灵活。
4. 响应式优化建议
在小屏幕上展示多列表格容易拥挤，可以考虑以下策略：
- 使用 Grid 的
minmax()
函数让列自适应：
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
- 隐藏次要列（通过
class="optional"
+
@media
控制显示）
- 转换为卡片布局（移动端每行一条记录，竖向排列）
基本上就这些。Grid 最强大，Flexbox 更易上手，
display: table
适合兼容老项目。根据需求选择合适方案就行。
以上就是如何用css html 响应式设计 上海 移动端适配 排列 css html auto class display flex table