如何在移动端屏幕缩小时将HTML表格调整为垂直对齐布局

你可以通过CSS媒体查询在移动端断点下重写表格元素的默认布局属性，无需修改现有HTML结构就能实现横竖布局切换，具体实现方案如下：

方案1：不用改HTML，仅加CSS即可 #

设置小于768px的断点触发重排，直接把表格元素转成块级元素，用伪元素插入表头内容：

@media (max-width: 768px) {
  /* 所有表格相关元素转为块级，占满整行 */
  .rides-table, .rides-table tbody, .rides-table tr, .rides-table th, .rides-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* 隐藏原有表头，避免重复展示 */
  .rides-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  /* 每行做成独立卡片，加边距区分 */
  .rides-table tr {
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
  }
  .rides-table td {
    position: relative;
    padding: 8px 8px 8px 50%;
    border-bottom: 1px solid #e5e7eb;
  }
  /* 伪元素放左侧显示表头 */
  .rides-table td::before {
    position: absolute;
    left: 8px;
    width: 45%;
    font-weight: 600;
  }
  /* 对应每个单元格的表头内容 */
  .rides-table td:nth-of-type(1)::before { content: "Monday"; }
  .rides-table td:nth-of-type(2)::before { content: "Thursday"; }
  .rides-table td:nth-of-type(3)::before { content: "Friday"; }
  .rides-table td:nth-of-type(4)::before { content: "Sunday"; }
}

方案2：更易维护的版本 #

如果后续可能改表头内容，建议给每个td加data-label属性存对应表头名，CSS直接读属性值就行，不用每次调整都改CSS：
修改后的HTML：

<table class="rides-table">
  <tr>
    <th>Monday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Sunday</th>
  </tr>
  <tr>
    <td data-label="Monday">30 miles</td>
    <td data-label="Thursday">70 miles</td>
    <td data-label="Friday">50 miles</td>
    <td data-label="Sunday">40 miles</td>
  </tr>
  <tr>
    <td data-label="Monday">Beginner</td>
    <td data-label="Thursday">Advanced</td>
    <td data-label="Friday">Intermediate</td>
    <td data-label="Sunday">Beginner</td>
  </tr>
</table>

对应的CSS只需要把伪元素的content改成如下配置即可，其他样式和方案1保持一致：

.rides-table td::before {
  content: attr(data-label);
}

两种方案都不会影响桌面端原有的水平对齐效果，触发移动端断点后就会自动变成垂直布局，每个数据项对应表头展示，可读性更高。

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