为何无法滚动到表格首列？固定宽度表格滚动异常求助

问题根源 #

你的表格无法滚动到首列，且小分辨率下无法正常横向滚动查看全部列，核心原因在于以下几点：

• 外层容器#reservation-calendar设置overflow-x: hidden，直接截断超出视口的内容，首列被隐藏后无法通过滚动显示
• .reservation-table使用align-items: center让宽表格居中，左右超出部分被外层容器截断
• tbody设置display: block破坏了表格原生布局逻辑，导致列宽计算和滚动行为异常
• 存在两处CSS语法错误：padding: none（正确写法为padding: 0）、font-weight: white（正确写法为font-weight: bold）
• HTML中.plus列的<a>标签存在未闭合的语法错误

修复后的代码 #

HTML修正版

<div id="reservation-calendar">
  <div class="reservation-table">
    <table>
      <tbody>
        <tr>
           <td class="time">
            <p>8:30</p>
            <a href="#">There is plus svg</a>
           </td> 
           <td class="plus"><a href="#">There is plus svg</a></td>
           <td class="plus"><a href="#">There is plus svg</a></td>
           <td class="plus"><a href="#">There is plus svg</a></td>
          </tr>
      </tbody>
    </table>
  </div>
</div>

SCSS修正版

#reservation-calendar{
    width: 100%;
    overflow-x: auto; /* 替换hidden，允许外层横向滚动 */
    .reservation-table{
        width: 100%; /* 自适应父级宽度，避免居中截断 */
        overflow-x: auto;
        table{
            width: 126rem; /* 保持固定宽度 */
            border-collapse: collapse;
            tbody{
                /* 移除display: block，恢复表格原生布局 */
                tr{
                    .time{
                        width: 6rem;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-between;
                        border: none;
                        padding: 0; /* 修正语法错误 */
                       p{
                        font-size: 2rem;
                        background: blue;
                        color: $white; /* 若未定义$white可替换为white */
                        font-weight: bold; /* 修正语法错误 */
                        padding: 0.3rem 0.5rem 0;
                       }
                       a{
                        text-align: center;
                        margin-top: 0.5rem;
                        svg{
                            width: 2.5rem;
                        }
                       }
                    }
                    .plus{
                        text-align: center;
                        border: 2px solid $text; /* 若未定义$text可替换为#333 */
                        width: 40rem;
                        padding: 0.5rem;
                        a{
                            svg{
                                width: 3rem;
                            }
                        } 
                    }
                }
            }
        }
    }
}

修复要点说明 #

1. 外层容器改为overflow-x: auto，确保内容超出时显示横向滚动条，不会截断内容
2. 移除.reservation-table的flex布局和居中对齐，让表格自然填充容器，避免左右内容被截断
3. 恢复表格原生布局（移除tbody的display: block），保证列宽和滚动行为符合预期
4. 修正HTML和CSS中的语法错误，避免布局异常

内容的提问来源于stack exchange，提问作者Jiří Nováček