使用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适合兼容老项目。根据需求选择合适方案就行。
