如何为表格设置x轴溢出滚动，添加overflow-x:auto无效如何解决

直接给table元素加overflow-x: auto不生效有两个核心原因：

• table是特殊的渲染元素，当设置了border-collapse: collapse时，overflow属性对table本身无效
• 你给table设置了width: 100% !important，默认布局下table会自动收缩列宽适配父容器宽度，不会产生内容溢出，自然不会触发滚动

• 把横向滚动相关属性移到table的外层父容器（也就是你代码里class为table mt-3的div）上
• 给外层容器设置max-width: 100%，避免容器宽度超出移动端视口
• 给table设置最小宽度，防止列被过度挤压，当table宽度超过外层容器宽度时就会自动触发横向滚动
• 可选添加-webkit-overflow-scrolling: touch优化iOS端的滚动流畅度

CSS部分 #

/* 外层表格容器样式 */
.table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 原table上的阴影移到外层容器，避免滚动时阴影错位 */
    border-radius: 4px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.content-table {
    border-collapse: collapse !important;
    margin: 0 auto;
    /* 移除原table上的overflow-x属性，设置最小宽度 */
    min-width: 600px; /* 可根据实际表格列数调整，数值大于移动端视口宽度时即可触发滚动 */
    width: 100% !important;
    background: #fff;
}

.content-table thead tr {
    background: #f0f7ff;
    color: #00639e;
    text-align: left;
    font-weight: 700;
}

.content-table th {
    padding: 10px 15px;
    font-size: 0.75rem;
}

.content-table td {
    padding: 8px 10px;
    font-size: 0.75rem;
}

.content-table tbody tr {
    border-bottom: 1px solid #dddddd;
    transition: 0.15s ease-in;
    font-weight: 500;
    color: #444444;
}

.content-table tbody tr:hover {
    background: rgb(251, 245, 233);
    color: #ef822e;
}

HTML部分 #

原有HTML结构不需要调整，直接使用即可：

<div class="table mt-3">
  <table class="content-table">
    <thead>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
      <tr class="active-row">
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
    </tbody>
  </table>
</div>

补充：如果不需要固定table最小宽度，可以把min-width: 600px替换成width: max-content，table宽度会完全跟随内容自适应，只要内容宽度超过外层容器，就会自动出现横向滚动条。

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