HTML表格内容侧边栏隐藏问题求助：添加横向滚动及解决方案

我制作了一个HTML表格，目前表格中有2列内容被隐藏在侧边栏中，在移动端仅能显示少数列的数据。我希望显示全部内容，添加底部横向滚动，同时请告知其他可行的修复方案。

方案一：添加底部横向滚动（核心解决方法） #

通过给表格包裹容器开启横向滚动，同时调整布局避免列错位，具体修改如下：

修改后的HTML #

<div class="table-container">
  <table>
    <thead>
      <tr>
        <td>Date</td>
        <td>Day</td>
        <td>Time From</td>
        <td>Time To</td>
        <td>%</td>
        <td>Sunday</td>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday 1</td>
        <td>Saturday</td>
        <td>Hse</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>06-04-23</td>
        <td>Thursday</td>
        <td>7:04</td>
        <td>8:39</td>
        <td>76%</td>
        <td>Mon</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>6</td>
        <td>6</td>
      </tr>
      <tr>
        <td>06-04-23</td>
        <td>Thursday</td>
        <td>7:04</td>
        <td>8:39</td>
        <td>76%</td>
        <td>Mon</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>Monday</td>
        <td>6</td>
        <td>6</td>
      </tr>
    </tbody>
  </table>
</div>

修改后的CSS #

.table-container {
  overflow-x: auto; /* 开启横向滚动条 */
  max-width: 100%; /* 容器宽度限制为父元素宽度 */
}

table {
  border-collapse: collapse;
  width: auto; /* 取消固定100%宽度，让表格自适应内容 */
  min-width: 100%; /* 小屏幕下表格至少占满容器 */
}

table td {
  border: 1px solid black;
  color: black;
  white-space: nowrap; /* 禁止单元格内容换行，避免列被挤压变形 */
}

th, td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tbody {
  display: block; /* 让tbody独立滚动 */
  height: 200px;
  overflow-y: scroll;
}

thead, tbody tr {
  display: table; /* 保持表头和行的表格布局 */
  width: 100%;
  table-layout: fixed; /* 固定列宽，避免表头与内容列错位 */
}

其他可行修复方案 #

• 响应式列隐藏：用媒体查询在移动端隐藏非核心列（比如周末列、Hse列），保留Date、Day、时间等关键数据，同时可加一个“展开全部”按钮切换显示状态。
• 堆叠式表格：小屏幕下把表格转为垂直堆叠布局，每行变成独立卡片，列名和对应值成对展示，适合数据量不大的场景。
• 精简单元格样式：缩小单元格内边距（比如改成padding: 4px）和字体大小（比如font-size: 14px），在保证可读性的前提下挤下更多列。
• 固定表头+横向滚动：结合横向滚动实现表头固定，滚动内容时表头始终可见，提升长表格的浏览体验，需要额外CSS或JS实现。

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