如何让HTML表格实现响应式行列整体换行？

问题描述 #

当前HTML表格因列数过多导致右侧内容溢出屏幕，希望将表格设置为响应式，让行列作为整体向下换行折叠，而非使用overflow-x: auto添加横向滚动条。

修改后的完整代码 #

CSS 代码

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #ffffff;
}

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background-color: #231F20;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #000000;
}

.logo {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  padding: 20px;
  font-size: 12px;
  color: white;
}

.content h2 {
  color: #ffffff;
  font-size: 14px;
}

.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  table-layout: fixed; /* 固定表格布局，自动分配列宽 */
}

.content table,
.content th,
.content td {
  border: 1px solid #ddd;
}

.content th,
.content td {
  padding: 8px;
  text-align: left;
  /* 移除white-space: nowrap，允许单元格内容换行 */
}

/* 响应式媒体查询，小屏幕下折叠表格 */
@media (max-width: 600px) {
  .content table,
  .content thead,
  .content tbody,
  .content th,
  .content td,
  .content tr {
    display: block;
  }

  .content tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }

  .content td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding-left: 50%;
  }

  .content td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 8px;
    font-weight: bold;
    text-align: left;
  }
}

HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inquiry Confirmation</title>
</head>

<body>
  <div class="container">
    <div class="logo">
      <img src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg" alt="Logo" width="200">
    </div>
    <div class="content">
      <table>
        <thead></thead>
        <tbody>
          <tr>
            <td data-label="Dep. Date">##DATE##</td>
            <td data-label="Dep. Time">##TIME##</td>
            <td data-label="Aircraft">##AIRCRAFT_TYPE##</td>
            <td data-label="From">##FROM##</td>
            <td data-label="To">##TO##</td>
            <td data-label="PAX">##PAX##</td>
            <td data-label="Tour Type">##TourType##</td>
            <td data-label="Tour Type 2">##TourType 2##</td>
            <td data-label="Tour Type 3">##TourType 3##</td>
            <td data-label="Tour Type 4">##TourType 4##</td>
            <td data-label="Tour Type 5">##TourType 5##</td>
            <td data-label="Tour Type 6">##TourType 6##</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

关键修改说明 #

• 移除了.content th, .content td中的white-space: nowrap，允许单元格内容自动换行，避免强制不换行导致的溢出
• 给表格添加table-layout: fixed，让浏览器自动分配列宽，适应容器宽度
• 添加媒体查询，在屏幕宽度小于600px时：
  • 将表格、表头、tbody、行、单元格全部改为块级元素
  • 给每个单元格添加data-label属性，对应原表头文本
  • 通过伪元素::before显示表头文本，实现每行一组「标签+内容」的折叠效果，完全适配小屏幕

内容的提问来源于stack exchange，提问作者Asadullah khan