如何解决移动端宽表格宽度适配及单元格文本重叠问题？

问题分析 #

你的表格在≤1000px的屏幕上出现文本重叠，核心原因有两点：

• 原代码中table-layout: fixed会强制表格按固定规则分配列宽，小屏幕下单元格宽度被过度挤压，导致文本溢出；
• 你之前的媒体查询错误地给table设置overflow: auto，但overflow属性对表格元素无效，需给表格的父容器设置；同时分开的表头（.tbl-header）和表体（.tbl-content）未同步滚动，进一步加剧布局混乱。

解决方案 #

方案一：保留横向滚动布局（推荐）

修改CSS，让表头和表体同步横向滚动，同时优化小屏幕下的内边距与字体，避免文本挤压：

/* 保留原基础样式，新增/修改以下代码 */
.tbl-header{
  background-color: rgba(255,255,255,0.3);
  overflow-x: auto; /* 让表头也能随表体横向滚动 */
}

/* 替换你原来的媒体查询 */
@media (max-width: 1000px){
  section{
    margin: 20px; /* 减少边距，充分利用屏幕空间 */
  }
  th{
    padding: 12px 8px; /* 缩小表头内边距 */
    font-size: 11px;
  }
  td{
    padding: 10px 8px; /* 缩小单元格内边距 */
    font-size: 11px;
  }
  /* 设置表格最小宽度，避免列宽被过度压缩 */
  table{
    min-width: 600px;
  }
}

方案二：移动端堆叠式响应表格（无横向滚动）

如果希望在小屏设备上完全消除横向滚动，可将表格转为堆叠布局，每行变为独立卡片，表头作为单元格标签显示：

/* 新增针对小屏的媒体查询 */
@media (max-width: 768px){
  /* 隐藏原表头 */
  .tbl-header{
    display: none;
  }
  /* 将表格行转为块级元素，形成独立卡片 */
  .tbl-content table tbody tr{
    display: block;
    border: 1px solid rgba(255,255,255,0.3);
    margin-bottom: 10px;
    padding: 10px;
  }
  /* 将单元格转为块级，调整对齐方式 */
  .tbl-content table tbody tr td{
    display: block;
    text-align: right;
    border-bottom: none;
    padding: 8px 0;
    position: relative;
  }
  /* 通过伪元素添加表头标签 */
  .tbl-content table tbody tr td::before{
    content: attr(data-label);
    position: absolute;
    left: 0;
    font-weight: 500;
    text-transform: uppercase;
  }
}

同时需要给HTML的每个<td>添加data-label属性，对应表头文本：

<tr>
  <td data-label="Code">AAC</td>
  <td data-label="Company">AUSTRALIAN COMPANY </td>
  <td data-label="Price">$1.38</td>
  <td data-label="Change">+2.01</td>
  <td data-label="Change %">-0.36%</td>
</tr>

原媒体查询无效的原因 #

• overflow: auto设置在table上无效，表格元素默认不会触发滚动行为，必须给包裹表格的父容器（.tbl-header、.tbl-content）设置；
• width: 60%会让表格在小屏幕上更窄，反而加剧文本重叠，正确做法是保持表格宽度，让父容器提供滚动能力。

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