如何自定义表格使其在移动端垂直堆叠并消除横向滚动？

问题分析 #

你当前的CSS已经实现了表格列垂直堆叠，但仍存在横向滚动，主要原因大概率是：

• 表格或其父容器保留了默认的内边距、外边距或边框间距
• 单元格内的超长无换行文本（比如连续字符串、长单词）撑宽了容器
• 未限制容器的横向溢出行为

优化后的CSS代码 #

/* 合并所有移动端媒体查询，减少冗余代码 */
@media (max-width: 1199px) {
  /* 重置表格默认样式，确保占满可用宽度 */
  table {
    width: 100%;
    border-collapse: collapse; /* 合并边框，避免额外间距 */
    margin: 0;
    padding: 0;
  }

  thead {
    display: none;
  }

  tr {
    display: block;
    margin-bottom: 1rem; /* 行之间添加间距，提升可读性 */
    border: 1px solid #333; /* 可选：给每行加边框，区分条目 */
  }

  tr:nth-of-type(2n) {
    background-color: inherit;
  }

  tr td:first-child {
    background: #070707;
    font-weight: bold;
    font-size: 1.5em;
    padding: 0.8rem; /* 增加内边距，避免内容贴边 */
  }

  tbody td {
    display: block;
    text-align: center;
    padding: 0.5rem;
    box-sizing: border-box; /* 确保内边距不增加元素总宽度 */
  }

  tbody td:before {
    content: attr(data-th);
    display: block;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.3rem;
  }

  /* 处理超长文本，强制换行适配 */
  tbody td,
  tbody td:before {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto; /* 自动断词，适配不同语言文本 */
  }
}

/* 给表格父容器添加样式（如果有父容器的话） */
.table-container {
  width: 100%;
  overflow-x: hidden; /* 彻底隐藏横向溢出 */
}

额外适配要点 #

• 若表格有父级容器，必须给父容器加上width:100%和overflow-x:hidden，防止容器本身溢出
• 检查全局样式，若body或html设置了min-width，需移除或调整为适合移动端的数值
• 可给移动端body添加overflow-x:hidden，避免页面整体出现横向滚动

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