数据表中的标题对齐方式

Question

这是我的数据表功能：
你能告诉我这有什么问题吗？

我的代码显示水平滚动，但标题列和容器列与宽度不匹配。

var getProviders = function () {
            $("#table-transportation").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search from all Records"
                },
                //"aLengthMenu": [[25, 50, 100, 150, 250, 500, -1], [25, 50, 100, 150, 250, 500, "All"]],
                //"iDisplayLength": 50,
                "sScrollX": "150%",
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bScrollCollapse": true,
                "sScrollXInner": "150%",
                "bDestroy": true,
                "sAjaxSource": "frmTrip.aspx/GetProvidersList",
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                //"aoColumnDefs": [{ "bSortable": false, "aTargets": [-1, -2]}],
                "fnInitComplete": function () {
                    this.fnAdjustColumnSizing(true);
                },
                "aoColumns":
                                            [
                                                null,
                                                null,
                                                null,
                                                null,
                                                null,
                                                null,
                                                null,
                                                null,
                                                null,
                                                null,
                                                { "sWidth": "5%" },
                                                { "sWidth": "5%" },
                                                { "sWidth": "5%" },
                                                { "sWidth": "5%" },
                                                { "sWidth": "6%" },
                                                { "sWidth": "6%" },
                                                { "sWidth": "5%" }
                                            ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success":
                                                    function (msg) {

                                                        var json = jQuery.parseJSON(msg.d);
                                                        fnCallback(json);
                                                        $("#table-transportation").show();
                                                    }
                    });
                }
            }).columnFilter({ sPlaceHolder: "head:before", aoColumns: [{ type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }, { type: "select", values: ['Yes', 'No'] }, { type: "select", values: ['Yes', 'No'] }, { type: "select", values: ['Yes', 'No'] }, { type: "select", values: ['Yes', 'No'] }, { type: "select", values: ['Yes', 'No'] }, { type: "select", values: ['Yes', 'No'] }, { type: "select", values: ['Yes', 'No']}] });

            //                        $(window).bind('resize', function () {
            //                            getProviders.fnAdjustColumnSizing();
            //                        });
        }

这是我的数据表功能
你可以告诉我有什么问题吗

我的代码显示水平滚动，但标题列和容器列与宽度

不匹配

此数据的Css就像这样

.dataTables_wrapper .top {
    padding: 5px 10px;
    padding-top: 0;
    padding-bottom: 0px;
    background: url("../img/sprites/tables/table-head-bg.png") repeat-x scroll top left #dddddd;
    border-bottom: 1px solid #949494;
}

.dataTables_wrapper .block-actions {
    margin-top: 0;
    line-height: 35px;
    padding-left: 20px;
    padding-right: 20px;
}

.dataTables_wrapper .actions {
    border: none;
    border-top: 1px solid #C8C8C8;
}

.dataTables_wrapper {
    position: relative;
    margin: 0 -10px;
    clear: both;
    zoom: 1; /* Feeling sorry for IE */
}

.dataTables_wrapper .actions {
    line-height: 25px;
}

.dataTables_length {
    float: left;
    padding-left: 100px;
}

.dataTables_length div.selector {
    width: 70px !important;
}

.dataTables_length div.selector span {
    width: 70px !important;
}

.dataTables_length label {
    margin-left: -100px;
}

.dataTables_length select {
    width: 100px;
}

.dataTables_filter {
    float: right;
    text-align: right;
    padding-left: 100px;
}

.dataTables_filter label {
    margin-left: -100px;
}

.dataTables_filter input {
    width: 150px;
}

.dataTables_info {
    float: left;
}

.dataTables_paginate {
    float: right;
}

.paging_full_numbers {

}

.dataTables_wrapper label {
    display: block;
    margin-bottom: 0;
    line-height: 33px;
}

.webkit .dataTables_wrapper label {
    display: inline;
}

.dataTables_length .chzn-container {
    display: inline-block;
    float: right;
    margin-left: 10px;
}

.webkit .dataTables_length .chzn-container {
    width: 62px !important;
}

.webkit .dataTables_length .chzn-drop {
    width: 60px !important;
}

.dataTables_filter input {
    display: inline-block;
    float: right;
    margin: 5px 0 0 10px;
}

.dataTables_processing {
    background-color: white;
    border: 1px solid #DDDDDD;
    color: #999999;
    font-size: 14px;
    height: 30px;
    left: 50%;
    margin-left: -125px;
    margin-top: -15px;
    padding: 14px 0 2px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 250px;
}