如何使用DataTables.js实现水平滚动的数据表格

你遇到的滚动条不显示问题和插件配置关系不大，核心是代码里的3个基础错误，改完即可正常触发水平滚动：

• HTML结构不规范：你把CSS引用、JS引用、DataTables初始化代码全部写在了<html>标签外部，浏览器解析时会打乱资源加载和DOM渲染顺序，导致DataTables的滚动布局逻辑无法正常执行。所有外部资源、自定义脚本都必须放在<head>标签内部，或者</body>闭合标签之前。
• 表格列数不匹配：表头<thead>里一共定义了8个列标题，但表体<tbody>的行内只写了7个单元格，缺失「Date of Birth」对应的<td>，DataTables计算表格总宽度时会直接布局错乱，滚动逻辑完全失效。
• 配置写法和样式添加位置错误：sScrollX是DataTables 1.9及更早版本的旧配置，1.10+版本直接用scrollX: true即可；另外overflow-x是容器属性，直接加在<table>标签上没有任何效果。

修正后可直接运行的代码 #

<html>
<head>
    <title>Recon Table</title>
    <!-- 所有资源引用统一移到head内，保证加载顺序正确 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <div class="box-transparent">
        <!-- 给外层容器明确宽度约束，避免宽度计算异常 -->
        <div class="box-content table-scroll-box" style="width: 100%;">
            <table class="display nowrap" id="recon-table" style="width:100%">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Phone Number</th>
                        <th>Username</th>
                        <th>Date of Birth</th>
                        <th>Language</th>
                        <th>Gender</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>somet@email.com</td>
                        <td>1234567890</td>
                        <td>uname</td>
                        <!-- 补全之前缺失的出生日期列，保证表头表体列数一致 -->
                        <td>1990-01-01</td>
                        <td>English</td>
                        <td>Male</td>                            
                    </tr>                    
                </tbody>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#recon-table').DataTable({
                // 新版标准配置开启水平滚动
                scrollX: true
            });
        });
    </script>
</body>
</html>

后续避坑提醒 #

• 不要给<table>标签本身加overflow相关样式，水平滚动条由DataTables自动生成的外层包裹div实现，手动给table加这类样式完全无效。
• 如果后续写自定义CSS，不要修改DataTables生成的.dataTables_scroll、.dataTables_scrollBody、.dataTables_scrollHead类的overflow属性，否则会覆盖插件默认的滚动逻辑。
• 写HTML时优先保证基础结构正确：所有可见内容、资源、脚本必须包裹在<html>标签内，表头和表体的列数必须完全对应，这类基础错误会导致绝大多数JS插件功能异常，和插件本身的配置无关。

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