数据表 jquery - 表头宽度与主体宽度不对齐

Question

提问by kishore

I am using jQuery datatables. When running the application, the header width is not aligned with the body width. But when I click on the header, it is getting aligned with the body width but even then there is some light misalignment. This problem occurs only in IE.

我正在使用 jQuery 数据表。运行应用程序时，标题宽度与正文宽度不对齐。但是当我点击标题时，它与身体宽度对齐，但即使如此，也会有一些轻微的错位。此问题仅在 IE 中出现。

JSFiddle

This is how it looks when the page gets loaded:

这是页面加载时的样子：

enter image description here

在此处输入图片说明

After clicking on the header:

点击标题后：

enter image description here

在此处输入图片说明

My datatable code:

我的数据表代码：

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

ratesis my table id.
Could anyone help me with this? Thanks in advance.

rates是我的表 ID。
有人可以帮我解决这个问题吗？提前致谢。

Answer 1

采纳答案by kishore

Found the solution :

找到解决方案：

Added table-layout:fixedto the table. And opened the application in IE mode.

添加table-layout:fixed到表中。并在IE模式下打开应用程序。

Answer 2

回答by Gyrocode.com

CAUSE

原因

Most likely your table is hidden initially which prevents jQuery DataTables from calculating column widths.

很可能您的表格最初是隐藏的，这会阻止 jQuery DataTables 计算列宽。

SOLUTION

解决方案

If table is in the collapsible element, you need to adjust headers when collapsible element becomes visible.
For example, for Bootstrap Collapse plugin:
```
$('#myCollapsible').on('shown.bs.collapse', function () {
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});
```

If table is in the tab, you need to adjust headers when tab becomes visible.

For example, for Bootstrap Tab plugin:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

如果 table 在可折叠元素中，则需要在可折叠元素可见时调整标题。

例如，对于 Bootstrap Collapse 插件：

$('#myCollapsible').on('shown.bs.collapse', function () {
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

如果表格在选项卡中，则需要在选项卡可见时调整标题。

例如，对于 Bootstrap Tab 插件：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

Code above adjusts column widths for all tables on the page. See columns().adjust()API methods for more information.

上面的代码调整页面上所有表格的列宽。有关columns().adjust()更多信息，请参阅API 方法。

RESPONSIVE, SCROLLER OR FIXEDCOLUMNS EXTENSIONS

响应式、滚动条或固定列扩展

If you're using Responsive, Scroller or FixedColumns extensions, you need to use additional API methods to solve this problem.

如果您使用 Responsive、Scroller 或 FixedColumns 扩展，则需要使用其他 API 方法来解决此问题。

If you're using Responsive extension, you need to call responsive.recalc()API method in additionto columns().adjust()API method. See Responsive extension – Incorrect breakpointsexample.
If you're using Scroller extension, you need to call scroller.measure()API method instead ofcolumns().adjust()API method. See Scroller extension – Incorrect column widths or missing dataexample.
If you're using FixedColumns extension, you need to call fixedColumns().relayout()API method in additionto columns().adjust()API method. See FixedColumns extension – Incorrect column widthsexample.

如果您使用响应扩展，你需要调用responsive.recalc()API方法除了以columns().adjust()API方法。请参阅响应式扩展 – 不正确的断点示例。
如果您使用的是 Scroller 扩展，则需要调用scroller.measure()API 方法而不是columns().adjust()API 方法。请参阅滚动器扩展 – 不正确的列宽或缺失数据示例。
如果您使用FixedColumns扩展，你需要调用fixedColumns().relayout()API方法除了以columns().adjust()API方法。请参阅FixedColumns 扩展 – 不正确的列宽示例。

LINKS

链接

See jQuery DataTables – Column width issues with Bootstrap tabsfor solutions to the most common problems with columns in jQuery DataTables when table is initially hidden.

请参阅jQuery DataTables – Bootstrap 选项卡的列宽问题，了解最初隐藏表时 jQuery DataTables 中列的最常见问题的解决方案。

Answer 3

回答by Sharjeel Ahmed

I solved this problem by wrapping the "dataTable" Table with a divwith overflow:auto:

我用一个包裹“dataTable的”表解决了这个问题div有overflow:auto：

.dataTables_scroll
{
    overflow:auto;
}

and adding this JS after your dataTableinitialization:

并在dataTable初始化后添加此 JS ：

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

Don't use sScrollXor sScrollY, remove them and add a divwrapper yourself which does the same thing.

不要使用sScrollXor sScrollY，删除它们并div自己添加一个包装器来做同样的事情。

Answer 4

回答by bamossza

I fixed, Work for me.

我修好了，为我工作。

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

Or

或者

var table = $('#example').DataTable();
table.columns.adjust().draw();

Reference: https://datatables.net/reference/api/columns.adjust()

参考：https: //datatables.net/reference/api/columns.adjust()

Answer 5

回答by Strucker

None of the above solutions worked for me but I eventually found a solution that did.

上述解决方案都不适合我，但我最终找到了一个解决方案。

My version of this issue was caused by a third-party CSS file that set the 'box-sizing' to a different value. I was able to fix the issue without effecting other elements with the code below:

我的这个问题版本是由第三方 CSS 文件引起的，该文件将“box-sizing”设置为不同的值。我能够使用下面的代码解决这个问题而不影响其他元素：

    $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

Hope this helps someone!

希望这可以帮助某人！

Answer 6

回答by RAS

make sure table width is 100%

确保表格宽度为 100%

Then "autoWidth":true

然后 "autoWidth":true

Answer 7

回答by Mike Ramsey

$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
        "bSortable": false
    },
    null,
    null,
    null,
    null
]}).fnAdjustColumnSizing( false );

Try calling the fnAdjustColumSizing(false) to the end of your datatables call. modified code above.

尝试在数据表调用结束时调用 fnAdjustColumSizing(false)。修改上面的代码。

Discussion on Column sizing issue

关于列大小问题的讨论

Answer 8

回答by vinaya kumar

issue is data table is called before the data table is drawn on DOM,use set time out before calling data table.

问题是在DOM上绘制数据表之前调用数据表，在调用数据表之前使用set time out。

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);

Answer 9

回答by frontend33

do not need to come up with various crutches, table header width not aligned with body, because due to the fact that the table did not have enough time to fill in the data for this, do setTimeout

不需要弄出各种拐杖，table header 宽度不与body对齐，因为table没有足够的时间为此填写数据，做setTimeout

   setTimeout(function() {
     //your datatable code 
  }, 1000);

Answer 10

回答by alexroat

Simply wrap table tag element in a div with overflow auto and position relative. It will work in chrome and IE8. I've added height 400px in order to keep table size fixed even after reloading data.

只需将 table 标签元素包装在一个带有溢出自动和相对位置的 div 中。它将在 chrome 和 IE8 中工作。我已经添加了 400px 的高度，以便即使在重新加载数据后也能保持表格大小不变。

table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
        //"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
        //"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
        "sAjaxSource": "datass.php",
        "aoColumns": colf,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "bProcessing": true,
        "bJQueryUI":true,
        "bPaginate": true,
        "table-layout": "fixed",
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
            oSettings.jqXHR = $.ajax({
                "dataType": 'JSON',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            $(nRow).click(function() {
                $(".row_selected").removeClass("row_selected");
                $(this).addClass("row_selected");
                //mostra il detaglio
                showDetail(aData.CandidateID);
            });
        },
        "fnDrawCallback": function(oSettings) {

        },
        "aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header

数据表 jquery - 表头宽度与主体宽度不对齐

提问by kishore

采纳答案by kishore

回答by Gyrocode.com

CAUSE

原因

SOLUTION

解决方案

RESPONSIVE, SCROLLER OR FIXEDCOLUMNS EXTENSIONS

响应式、滚动条或固定列扩展

LINKS

链接

回答by Sharjeel Ahmed

回答by bamossza

回答by Strucker

回答by RAS

回答by Mike Ramsey

回答by vinaya kumar

回答by frontend33

回答by alexroat

相关推荐

最近更新

标签

数据表 jquery - 表头宽度与主体宽度不对齐

提问by kishore

采纳答案by kishore

回答by Gyrocode.com

CAUSE

原因

SOLUTION

解决方案

RESPONSIVE, SCROLLER OR FIXEDCOLUMNS EXTENSIONS

响应式、滚动条或固定列扩展

LINKS

链接

回答by Sharjeel Ahmed

回答by bamossza

回答by Strucker

回答by RAS

回答by Mike Ramsey

回答by vinaya kumar

回答by frontend33

回答by alexroat

相关推荐

Onchange 通过选择打开 URL - jQuery

jquery keyup 函数检查数字

jquery 选择器以选择特定值的所有选择下拉列表

使用 jQuery 更改 url 查询字符串值

相关推荐

最近更新

标签