如何调整垂直堆叠表格中伪列宽度以实现垂直对齐？

只需修改媒体查询内的CSS代码，给伪表头元素设置统一宽度的块级展示，即可实现伪列垂直对齐的规整效果，同时保留原代码的易维护性：

.table-striped tbody tr:nth-child(odd) {
  background-color: #E7E9EB;
}

table {
  table-layout: fixed;
}

table thead th {
  text-align: left;
}

@media screen and (max-width: 600px) {
  table thead th {
    display: none;
  }

  table td {
    display: block;
    padding: 8px 0; /* 可选：增加垂直间距提升可读性 */
  }

  table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block; /* 转为inline-block才能设置固定宽度 */
    width: 80px; /* 根据表头文本长度调整，确保所有伪表头宽度一致 */
    margin-right:10px;
  }
}

修改说明： #

• 给td::before添加display: inline-block和固定width：解决原伪元素因文本长度不同导致的宽度不一致问题，让所有伪表头占据相同宽度，内容自然垂直对齐。
• 可选给table td添加上下内边距：优化移动端堆叠布局的视觉体验，避免内容过于拥挤。

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