CSS添加水平滚动条无效：表格滚动条未显示问题求助

问题场景 #

尝试为表格添加水平滚动条，但滚动条未在界面显示，相关代码如下：

HTML代码 #

<div class="cwc-table">    
    <div class="scrollable">
        <table style="width:100%" 
        data-show-columns="true"
        data-minimum-count-columns="2"
        data-checkbox-header="true"
        data-search="false" 
        data-pagination="true" 
        data-sort-order="asc" 
        data-show-export="true"
        data-export-types="['excel', 'csv']"
        data-export-options='{
            fileName: "export",
            worksheetName: "export",
            csvSeparator: ";",
            csvUseBOM: true 
         }' >
    </table>    
    </div>  
</div>

CSS代码 #

.scrollable {
    overflow-x: scroll;
}

原因排查 #

1. 表格宽度自适应：表格设置了width:100%，会完全适配父容器.scrollable的宽度，内容未超出容器范围时，不会触发横向滚动。
2. 容器无宽度边界：.scrollable容器未设置固定宽度或最大宽度，当容器随表格内容自动撑开时，不会出现溢出。
3. 表格插件样式干扰：从data-*属性判断使用了表格插件（如Bootstrap Table），插件可能自带响应式样式，强制表格自适应容器，抑制了滚动条的出现。

解决方案 #

方案1：给滚动容器设置宽度限制 #

为.scrollable添加固定宽度或最大宽度，明确容器边界：

.scrollable {
    overflow-x: scroll;
    /* 示例：限制最大宽度为视口宽度 */
    max-width: 100vw;
    /* 或者设置固定宽度：width: 800px; */
}

方案2：让表格内容超出容器 #

取消表格的width:100%，或设置表格最小宽度大于容器宽度，强制内容溢出：

.scrollable table {
    width: auto;
    /* 确保表格宽度超出容器 */
    min-width: 120%;
}

方案3：调整表格插件配置 #

如果使用Bootstrap Table等插件，检查是否开启了responsive相关属性，若开启可尝试关闭，避免插件强制表格自适应：

<!-- 移除或关闭响应式配置 -->
<table data-responsive="false" ...>

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