如何用css实现多列表格布局-css教程-PHP中文网

如何用css实现多列表格布局

P粉602998670

发布： 2025-09-20 14:53:01

原创

665人浏览过

使用CSS Grid、Flexbox或display: table可实现多列表格布局。1. Grid通过grid-template-columns和gap属性创建响应式表格，列宽自动分配；2. Flexbox用flex容器模拟行布局，适合移动端；3. display: table保留表格样式但语义化较弱；4. 响应式优化建议包括minmax()自适应、隐藏次要列或转卡片布局。Grid最强大，Flexbox易上手，display: table兼容性好。

如何用css实现多列表格布局

实现多列表格布局，不一定非得使用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 样式：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

立即学习“前端免费学习笔记（深入）”；

.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
```
登录后复制
控制显示）
转换为卡片布局（移动端每行一条记录，竖向排列）