DataTables 插件 - 在 tfoot 标签下方显示滚动条？

我使用 jQuery DataTables 插件"scrollX":true用于水平滚动。

为什么上面会出现滚动条tfoot标签？如何让它出现在页脚下方？

var table = $('#example')
    .DataTable(
    {
        "scrollX": true,
        "scrollCollapse": true,
        "dom": 'Zlrtip',
        "colResize": {
            "tableWidthFixed": false,
            //"handleWidth": 10,
            "resizeCallback": function(column)
            {

            }
        },
        "searching":   false,
        "paging":   false,
        "info":     false,
        "deferRender": true,
        "sScrollX": "190%"
    });

See JSFiddle 示例演示问题。

您需要将以下代码添加到 DataTables 初始化选项中：

"fnInitComplete": function(){
    // Disable TBODY scoll bars
    $('.dataTables_scrollBody').css({
        'overflow': 'hidden',
        'border': '0'
    });

    // Enable TFOOT scoll bars
    $('.dataTables_scrollFoot').css('overflow', 'auto');

    // Sync TFOOT scrolling with TBODY
    $('.dataTables_scrollFoot').on('scroll', function () {
        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
    });                    
},

See 更新了 JSFiddle用于演示。