如何用CSS实现表格表头侧边布局以适配PC窄屏？

不需要创建第二个表格，仅通过CSS媒体查询就能实现目标的窄屏适配效果，核心思路是在窄屏状态下打破表格默认的行列布局，将表头转为纵向排列在左侧，内容区域对应右侧。

具体实现代码 #

/* 全屏状态保持原有表格样式 */
.tablaModal {
  width: 100%;
  border-collapse: collapse;
}

/* 窄屏适配：可根据实际需求调整宽度阈值，比如992px适配PC半屏 */
@media (max-width: 768px) {
  .tablaModal {
    display: block;
    width: 100%;
  }

  /* 表头左侧纵向排列 */
  .tablaModal thead {
    display: block;
    float: left;
    width: 30%;
    background-color: #007bff; /* 匹配原btn-primary的蓝色背景 */
    color: #fff;
  }

  .tablaModal thead tr {
    display: block;
  }

  .tablaModal thead th {
    display: block;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    text-align: left;
  }

  /* 内容区域右侧排列，与表头对应 */
  .tablaModal tbody {
    display: block;
    width: 70%;
    float: left;
    overflow-x: auto; /* 内容过长时允许横向滚动 */
  }

  .tablaModal tbody tr {
    display: block;
    border-bottom: 1px solid #dee2e6;
  }

  .tablaModal tbody td {
    display: block;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-left: none;
    box-sizing: border-box;
  }

  /* 强制隐藏原本标记为hidden的列 */
  .tablaModal th[hidden],
  .tablaModal td[hidden] {
    display: none !important;
  }
}

实现原理说明 #

1. 媒体查询触发适配：当屏幕宽度小于设定阈值时，自动应用窄屏样式
2. 打破表格默认布局：将table、thead、tbody、tr、th、td的display属性改为block，脱离表格默认的行列渲染规则
3. 表头与内容分栏：通过float将表头固定在左侧，内容区域占据右侧剩余空间，实现纵向表头的视觉效果
4. 保留原有样式一致性：继承原表格的边框、背景色等样式，避免视觉断层

自定义调整建议 #

• 调整媒体查询的max-width值，比如改为992px更贴合PC半屏的场景
• 修改thead和tbody的宽度比例（比如35%/65%），根据表头文字长度优化显示
• 如果有多行数据，可调整tbody的overflow属性，比如设置overflow-y: auto实现纵向滚动

内容的提问来源于stack exchange，提问作者Andrea Hernández