JQuery数据表溢出

我已将我的数据库放在一个带标签的容器中，如果表太长，它会溢出。 更改选项卡时，以下代码调整列的大小：

$('#tmTabs').tabs( { "show": function(event, ui) { var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable(); if ( oTable.length > 0 ) { oTable.fnAdjustColumnSizing(); } } } ); 

但是，对处理时间有点负担，这个当前代码仅在您更改选项卡时有效。 当调用任何操作时，表会溢出，即排序，添加行或过滤等。

下面是溢出的截图，你可以在右侧看到，如箭头所示（只是用白色框清空数据，所以不要担心这些）：

如果有必要，inheritance我的其余代码来创建dataTables（我也使用可编辑的插件）：

 $('.dataTable').each(function(){ //get ID of current table; tblID = $(this).attr("id"); var pattern = "[0-9]+"; $tblIDNum = tblID.match(pattern); //transform this table into a data table $(this).dataTable({ "sScrollY": "600px", "bScrollCollapse": true, "bPaginate": false, "bJQueryUI": true, "aoColumnDefs": [ { "sWidth": "10%", "aTargets": [ -1 ] } ] }) .makeEditable({ //ajax requests for server-side processing sUpdateURL: "UpdateData.php", sAddURL: "AddData.php", sDeleteURL: "DeleteData.php", //Button Customization oAddNewRowButtonOptions: { label: "Add...", icons: { primary: 'ui-icon-plus' } }, oDeleteRowButtonOptions: { label: "Remove", icons: { primary: 'ui-icon-trash' } }, oAddNewRowOkButtonOptions: { label: "Confirm", icons: { primary: 'ui-icon-check' }, name: "action", value: "add-new" }, oAddNewRowCancelButtonOptions: { label: "Close", class: "back-class", name: "action", value: "cancel-add", icons: { primary: 'ui-icon-close' } }, oAddNewRowFormOptions: { title: 'Add New Row', show: "blind", hide: "explode" }, //Link button ids sAddDeleteToolbarSelector: ".dataTables_length", sAddNewRowFormId: "formAddNewRow"+$tblIDNum, sAddNewRowButtonId: "btnAddNewRow"+$tblIDNum, sAddNewRowOkButtonId: "btnAddNewRowOk"+$tblIDNum, sAddNewRowCancelButtonId: "btnAddNewRowCancel"+$tblIDNum, sDeleteRowButtonId: "btnDeleteRow"+$tblIDNum }); }); 

解决方案可以是什么？ 我不认为应该是困难的，如果不是所有的Javascript，CSS溢出属性可以只是改变。 使用Datatables让我后悔。 ：/

Answer 1

添加"sScrollX": "100%"

  $(this).dataTable({ "sScrollX": "100%", "sScrollY": "600px", "bScrollCollapse": true, "bPaginate": false, "bJQueryUI": true, "aoColumnDefs": [ { "sWidth": "10%", "aTargets": [ -1 ] } ] })