如何用CSS实现窄屏下单单元格独占一行的表格布局

DevOps 小满

2026-7-2

解决方案

1. 微调HTML结构

给表格添加自定义类（比如vertical-table），同时给每个<td>标签添加data-label属性，属性值对应其所在列的表头文本。既保留原有的<table>和<tr>结构，又能让CSS动态读取属性名。

示例HTML：

<table class="vertical-table">
  <thead>
    <tr>
      <th>用户名</th>
      <th>注册时间</th>
      <th>联系方式</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="用户名">JohnDoe_2024</td>
      <td data-label="注册时间">2024-01-15 14:30</td>
      <td data-label="联系方式">john.doe@example.com</td>
    </tr>
    <tr>
      <td data-label="用户名">JaneSmith_dev</td>
      <td data-label="注册时间">2024-02-20 09:15</td>
      <td data-label="联系方式">jane.smith@example.com</td>
    </tr>
  </tbody>
</table>

2. CSS实现竖排布局

通过CSS将表格转为竖排的「属性名: 属性值」形式，同时添加分隔线区分每个对象行：

/* 重置表格默认样式 */
.vertical-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

/* 视觉隐藏表头（DOM结构保留，不影响爬虫解析） */
.vertical-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 将每个对象行转为块级卡片，添加底部分隔线 */
.vertical-table tbody tr {
  display: block;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 1rem;
}

/* 将每个属性转为单行，用伪元素动态显示属性名 */
.vertical-table tbody td {
  display: block;
  padding: 0.5rem 0;
  text-align: left;
}

.vertical-table tbody td:before {
  content: attr(data-label) ": ";
  font-weight: bold;
  margin-right: 0.5rem;
}