移动端如何将rowspan列移至行顶部以适配单屏？

核心思路 #

通过CSS媒体查询针对移动端屏幕重写表格布局，将原本的横向表格转为类卡片的纵向布局，把BASIC列作为每行的标题置于顶部，从而节省横向空间适配单屏显示。

适配后的HTML结构（若原有结构未满足，可微调） #

<table class="responsive-table">
  <thead>
    <tr>
      <th>BASIC</th>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
      <th>COLUMN 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="basic-cell">Basic Item 1</td>
      <td data-label="COLUMN 1">Content 1-1</td>
      <td data-label="COLUMN 2">Content 1-2</td>
      <td data-label="COLUMN 3">Content 1-3</td>
    </tr>
    <tr>
      <td class="basic-cell">Basic Item 2</td>
      <td data-label="COLUMN 1">Content 2-1</td>
      <td data-label="COLUMN 2">Content 2-2</td>
      <td data-label="COLUMN 3">Content 2-3</td>
    </tr>
  </tbody>
</table>

CSS实现代码 #

/* 桌面端保持原有表格布局 */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}
.responsive-table th, .responsive-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.responsive-table th {
  background-color: #f2f2f2;
}

/* 移动端适配：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  /* 隐藏原生表头，改用伪元素展示列标题 */
  .responsive-table thead {
    display: none;
  }
  /* 将每行转为块级元素，作为独立卡片 */
  .responsive-table tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid #ddd;
  }
  /* 将单元格转为块级，实现纵向排列 */
  .responsive-table td {
    display: block;
    text-align: right;
    position: relative;
    padding-left: 50%;
    border: none;
    border-bottom: 1px solid #eee;
  }
  /* 为非BASIC列添加伪元素，显示对应表头文本 */
  .responsive-table td:not(.basic-cell)::before {
    content: attr(data-label);
    position: absolute;
    left: 8px;
    text-align: left;
    font-weight: bold;
  }
  /* 单独处理BASIC列：置顶、占满宽度、高亮显示 */
  .responsive-table .basic-cell {
    background-color: #f2f2f2;
    text-align: left;
    padding-left: 8px;
    font-weight: bold;
  }
}

关键细节说明 #

• 非BASIC列的td需添加data-label属性，值对应原表头的文本，确保伪元素能正确显示列标题。
• 媒体查询的断点768px可根据实际需求调整，适配不同移动端设备宽度。
• 通过将tr转为块级并添加间距，让每行呈现独立卡片样式，提升移动端内容可读性。

内容的提问来源于stack exchange，提问作者Prageeth Liyanage