jquery datatable具有静态宽度

Question

我使用数据表显示患者信息。一切都很好。但是当我试图让桌子响应时，我遇到了困难。我已经看到该表总是有一个静态宽度。我尝试了很多选项，比如bAutoWidth：false和bootstrap，但它不起作用。我的桌子是

 <table id="Enrolled_Patients" class="responsive display table table-striped table-bordered table-hover tablerow-hover" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th class="hidden-480">Subscriber ID</th>
                                        <th>Patient Name</th>
                                        <th class="hidden-480">City</th>
                                        <th>State</th>
                                        <th>Provider ID</th>
                                        <th>Balance</th>
                                        <th>Status</th>
                                        <th class="hidden-480">Last Update</th>
                                    </tr>
                                </thead>

                                <tbody></tbody>
                            </table>

淘汰模型中的

代码

self.table = $('#Enrolled_Patients').dataTable({
            "iDisplayLength": 50,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": vm.url_list,
            "aaSorting": [[7, "desc"]],
            "bDeferRender": true,
            "aoColumns": [
                null,
                null,
                null,
                null,
                { "sSortDataType": "dom-text", "sType": "currency" },
                null,
                null
            ],
            "fnServerData":
                function (sSource, aoData, fnCallback) {

                    for (var i = 0; i < self.filterStatus.length; i++) {
                        aoData.push({ name: "status", value: self.filterStatus[i] });
                    }
                    for (var i = 0; i < self.filterCity.length; i++) {
                        aoData.push({ name: "city", value: self.filterCity[i] });
                    }
                    for (var i = 0; i < self.filterEmail.length; i++) {
                        aoData.push({ name: "email", value: self.filterEmail[i] });
                    }
                    for (var i = 0; i < self.filterState.length; i++) {
                        aoData.push({ name: "state", value: self.filterState[i] });
                    }
                    aoData.push({ name: "balanceFrom", value: self.balanceFrom });
                    aoData.push({ name: "balanceTo", value: self.balanceTo });
                },
            "fnPreDrawCallback": function (a) {
                var data = a.aoData;
                for (var i = 0; i < data.length; i++) {
                    var d = data[i]._aData;
                    d[1] = self.getNameHtml(d[0], d[1]);
                    d[6] = self.getStatusHtml(d[5], d[7] == "true");
                }
            }
        });

我使用jquery.dataTables.min.js，jquery.dataTables-cust.min.js和dataTables.responsive.min.js，datatables.responsive.css

那么有人知道如何解决这个问题吗？