如何通过css制作响应式表格

响应式表格是指能够适配不同屏幕尺寸，在手机、平板、电脑等设备上都能清晰展示数据的表格组件，通过css的相关特性可以实现无需依赖JavaScript的纯样式响应式适配。

基础响应式表格实现思路

制作响应式表格的核心思路是当屏幕宽度不足以容纳表格原有列宽时，通过css调整表格的布局方式，避免内容横向溢出导致用户需要左右滑动才能查看完整数据。常见的实现方式有三种，开发者可以根据实际的数据复杂度和适配需求选择合适的方案。

方案一：使用水平滚动容器

这种方案适合列数较多、数据结构复杂的表格，原理是将表格放在一个可横向滚动的容器中，当屏幕宽度不足时，用户可以左右滑动查看所有列，同时保持表格原有的行列结构。

首先编写基础的表格HTML结构：

<div class="table-container">
  <table class="responsive-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>所在城市</th>
        <th>入职时间</th>
        <th>职位</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
        <td>2021-03</td>
        <td>前端开发</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>32</td>
        <td>上海</td>
        <td>2019-07</td>
        <td>后端开发</td>
      </tr>
    </tbody>
  </table>
</div>

对应的css样式代码如下：

/* 容器设置横向滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
}

/* 表格基础样式 */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* 设置最小宽度，小于该宽度时出现滚动条 */
}

.responsive-table th,
.responsive-table td {
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  text-align: left;
}

.responsive-table thead {
  background-color: #f5f5f5;
}

/* 斑马纹优化可读性 */
.responsive-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

方案二：基于媒体查询的布局转换

这种方案适合列数较少、数据内容简单的表格，当屏幕宽度小于某个阈值时，将表格从行列布局转换为每行数据单独展示的卡片式布局，避免横向滚动。

HTML结构可以复用上面的表格代码，css部分需要添加媒体查询规则：

/* 宽屏下的表格默认样式 */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  text-align: left;
}

.responsive-table thead {
  background-color: #f5f5f5;
}

/* 屏幕宽度小于768px时的适配样式 */
@media screen and (max-width: 768px) {
  /* 隐藏表头 */
  .responsive-table thead {
    display: none;
  }

  /* 表格行转换为块级元素 */
  .responsive-table tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
  }

  /* 单元格转换为块级元素，添加伪元素显示列名 */
  .responsive-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
    border: none;
    border-bottom: 1px solid #f0f0f0;
  }

  /* 最后一行的单元格去掉底部边框 */
  .responsive-table td:last-child {
    border-bottom: none;
  }

  /* 通过伪元素显示原来的列名 */
  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 45%;
    padding-right: 10px;
    text-align: left;
    font-weight: bold;
  }
}

同时需要修改HTML中的<td>标签，添加data-label属性存储对应的列名：

<tr>
  <td data-label="姓名">张三</td>
  <td data-label="年龄">28</td>
  <td data-label="所在城市">北京</td>
  <td data-label="入职时间">2021-03</td>
  <td data-label="职位">前端开发</td>
</tr>

方案三：使用flexbox实现响应式

这种方案适合需要对表格列做灵活调整的场景，通过flexbox的弹性特性，让表格列在窄屏下自动换行或者调整宽度比例。

HTML结构可以调整为flex布局兼容的结构：

<div class="flex-table">
  <div class="flex-table-header">
    <div class="flex-col">姓名</div>
    <div class="flex-col">年龄</div>
    <div class="flex-col">所在城市</div>
    <div class="flex-col">入职时间</div>
    <div class="flex-col">职位</div>
  </div>
  <div class="flex-table-row">
    <div class="flex-col">张三</div>
    <div class="flex-col">28</div>
    <div class="flex-col">北京</div>
    <div class="flex-col">2021-03</div>
    <div class="flex-col">前端开发</div>
  </div>
</div>

对应的css样式代码如下：

.flex-table {
  width: 100%;
}

/* 表头行样式 */
.flex-table-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 数据行样式 */
.flex-table-row {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

/* 列基础样式 */
.flex-col {
  flex: 1;
  padding: 12px 15px;
  text-align: left;
}

/* 窄屏适配：列宽调整，允许换行 */
@media screen and (max-width: 768px) {
  .flex-table-header,
  .flex-table-row {
    flex-wrap: wrap;
  }

  .flex-col {
    flex: 0 0 50%; /* 窄屏下每行显示两列 */
    box-sizing: border-box;
  }

  /* 表头在窄屏下隐藏，通过数据行的伪元素显示列名 */
  .flex-table-header {
    display: none;
  }

  .flex-table-row .flex-col {
    position: relative;
    padding-left: 40%;
    text-align: right;
  }

  .flex-table-row .flex-col::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    text-align: left;
    font-weight: bold;
  }
}

同样需要给数据列的<div>添加data-label属性，存储对应的列名。

不同方案的适用场景

三种方案各有适用的场景，开发者可以根据实际需求选择：

• 水平滚动容器方案：适合列数多、数据结构复杂、需要保留完整行列关系的表格，实现简单，兼容性好
• 媒体查询布局转换方案：适合列数少、数据简单、希望用户无需滑动就能查看所有内容的表格，移动端体验更好
• flexbox方案：适合需要灵活调整列布局、对样式定制要求高的场景，扩展性更强

注意事项

在制作响应式表格时，还需要注意以下几点：

• 尽量给表格设置合适的最小宽度，避免内容过度挤压导致可读性下降
• 移动端适配时，单元格的内边距可以适当调整，避免内容过于紧凑
• 如果需要支持非常老的浏览器，要注意flexbox和媒体查询的兼容性，必要时添加前缀或者降级方案
• 表格中的长文本可以添加word-break: break-all样式，避免长文本撑破布局

CSS响应式表格媒体查询flexbox修改时间：2026-06-20 17:57:49