jQuery 数据表标题与垂直滚动不对齐

Question

我已将其发布在 datatables.net 论坛中，但一周后，仍然没有回复。希望我可以在这里找到帮助...

我正在使用数据表版本 1.8.1，并且在启用垂直滚动的情况下对列标题对齐进行噩梦。

使用下面发布的代码，标题在 Firefox 和 IE8 和 IE9 中正确排列，但 Chrome 和 IE7 则关闭。我在这个项目中使用了很多数据表，这对每个数据表来说都是一个问题。我非常需要帮助！

编辑：我发现这与设置表格的宽度有关。数据表采用其容器的宽度。如果我不设置宽度，一切都会很好地排列（但是表格对于我在页面上需要的位置来说太大了）。如果我给表格的 div（或更高位置的父 div）提供宽度，则标题将无法正确对齐。

谢谢！

截图：

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/ie7_al​​ignment.png

otable = $('#order_review_grid').dataTable({                
    'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
        return formatRow(nRow, dataIndex);
    },
    'fnDrawCallback':function()
    {
        checkIfOrderSubmitted(this);                    
    },
    'aoColumnDefs':
    [
        { 'bVisible': false, 'aTargets': [COL_PRODUCT] },
        { 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
        { 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
        { 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
        { 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
    ],
    'sDom': 't',
    'sScrollY':'405px',
    'bScrollCollapse':true,
    'aaSorting':[]
});

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                 
    <thead class="grid_column_header_row" id="order_review_grid_column_header_row">
        <tr>
            <td class="" id='sequenceNumber'>SEQ #</td>
            <td class="grid_sc_header" id='statusCode'>Sc</td>
            <td class="grid_sc_header" id='onOrderGuide'>O.G.</td>
            <td class="grid_image_header" id='image'>Image</td>                         
            <td class="grid_description_header" id='description'>Description</td>                           
            <td class="grid_brand_header" id='label'>Brand</td>
            <td class="grid_pack_header" id='packSize'>Pack</td>
            <td class="grid_price_header" id='price'>Price</td>
            <td class="grid_qtrfull_header" id='caseQuantity'>Full</td>
            <td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>
            <td class="grid_refnum_header" id='referenceNumber'>Ref #</td>
            <td class="grid_refnum_header">&nbsp;</td>
        </tr>
    </thead>
    <tbody class="">
        <!-- loaded data will go here -->
    </tbody>
</table>

Answer 1

我这里也有同样的问题。它在 Mozilla Firefox、Opera 中工作正常（像素完美列对齐），但在 Chrome 21 中不行。

解决方案：

就像这篇文章中提到的http://datatables.net/forums/discussion/3835/width-columns- chrome-safari/p1 中的问题

基本上发生了什么，DataTables 正在尝试读取
浏览器绘制的表格宽度，因此可以使
标头匹配。问题是当 DataTables 这样做时
在您的页面上进行计算时，浏览器尚未显示滚动条 - 并且
因此计算略有错误！我建议的原因是
这是一个 Webkit 错误，即使在 DataTables 运行完所有内容之后
按照它的逻辑，滚动条仍然没有显示。如果你添加
下面的代码你可以看到这样的效果：

console.log( $(oTable.fnSettings().nTable).outerWidth() );
setTimeout( 函数 () {
console.log( $(oTable.fnSettings().nTable).outerWidth() ); }, 1);

有趣的是，在我添加 setTimeout 并执行后，仍然有一列未对齐。添加“sScrollX”:“100%”后，
“sScrollXInner”：“100%”所有列均对齐（像素完美）。

Chrome/Chromium 的解决方案，FF、Opera、IE9 中的源代码：

$(document).ready(function()
{
  var oTable = $('#mytable').dataTable(
  {
    "sScrollY":  ( 0.6 * $(window).height() ),
    "bPaginate": false,
    "bJQueryUI": true,
    "bScrollCollapse": true,
    "bAutoWidth": true,
    "sScrollX": "100%",
    "sScrollXInner": "100%"
  });


  setTimeout(function ()
  {
    oTable.fnAdjustColumnSizing();
  }, 10 );

});

Answer 2

我通过使用带有溢出：auto的div包装“dataTable”表解决了这个问题，

.dataTables_scroll
{
    overflow:auto;
}

并在dataTable初始化后添加这个JS

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

不要使用sScrollX或sScrollY，删除然后自己添加一个div包装器，它可以做同样的事情。

Answer 3

我遇到了这个问题，结果发现这是我的 CSS 的副作用。尝试禁用所有外部 CSS 并查看问题是否仍然存在。

Answer 4

var table = $("#myTable").DataTable({
            "sScrollY": "150px",
            //"bAutoWidth": false // Disable the auto width calculation 
        });

    $(window).resize( function () {
        table.columns.adjust();
    } );

Answer 5

if ( $.browser.webkit ) {
    setTimeout( function () {
        oTable.fnAdjustColumnSizing();
    }, 10 );
}

对我来说非常完美！

Answer 6

我遇到了类似的问题，但我的在搜索或排序或与表格交互后调整大小以导致重绘，尝试了重绘...功能，但最终没有临时凑合。对我有用的有趣修复是以相同的顺序调用 oTable.fnFilter( "x",0 ) 和 oTable.fnFilter( "",0 ) （搜索并清除搜索）...这有效...哈哈..:)

Answer 7

这可能会帮助您（不确定，但我想值得尝试）

页面

if ( $.browser.webkit ) {
   setTimeout( function () {
       oTable.fnAdjustColumnSizing();
   }, 10 );
}

将此代码添加到从这里获取的
Chrome 中的宽度列问题Safari

另外，我想值得尝试仅在构造函数中定义列，而不是在（将标签留空）中定义它们

Answer 8

我也遇到了这个问题。经过多次不同的尝试后，我尝试了以下方法并成功了。

我尝试在 style 属性中添加带有 float 属性的标签标记。然后就找到了。

例如：

<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>

Answer 9

我遇到一个问题，列中的数据太大而无法容纳，并且数据中没有换行符。我的解决方案是添加一个带有溢出和标题属性的 div，如下所示：

<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>

这导致表格几乎完全稳定下来。

Answer 10

如果您正在使用引导程序：

.table {
    width: 100%;
    max-width: none; // >= this is very important
}

Answer 11

这就是我摆脱这个问题的方法：

完成 Ajax 调用后执行函数

    WaAjaxHelper = {
    arr_execute_after_ajax: null,
    add_function_to_execute_after_ajax: function (fun) {

        if (typeof fun == 'function') {
            if (!this.arr_execute_after_ajax) {
                this.arr_execute_after_ajax = [];
            }
            this.arr_execute_after_ajax.push(fun)
            return true;
        } else {
            alert('ERROR: WaAjaxHelper.add_function_to_execute_after_ajax only functions possible');
            return false;
        }
    },
    execute_after_ajax: function () {
        if (this.arr_execute_after_ajax) {
            $.each(this.arr_execute_after_ajax, function (index, value) {
                try {
                    value();

                } catch (e) {
                    console.log(e);
                }
            })
        }
        this.arr_execute_after_ajax = null;
    }
}


$(document).ready(function () {
    $.ajaxSetup({
        async: true,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Accept", "text/javascript");
            $('.blockUI').css('cursor', 'progress');
        },
        complete: function (jqXHR, textStatus) {
            $('body').removeClass('waiting');
        },
        error: function (jqXHR, textStatus, errThrown) {
            alert("Ajax request failed with error: " + errThrown);
            ajax_stop();
        }
    });
    $(document).ajaxStart(ajax_start).ajaxStop(ajax_stop);
});


ajax_start = function () {
    // do something here
}
ajax_stop = function () {
   WaAjaxHelper.execute_after_ajax();
}

我通常使用它在视图中

  var tbl;
  WaAjaxHelper.add_function_to_execute_after_ajax(function (){tbl.fnDraw()})

：其中 tbl 存储数据表对象。

Answer 12

在 Firefox 中也遇到同样的问题，
我像这样改变了一点jquery脚本（在jquery.dataTables.js版本1.9.4中）：

line 3466 (v1.9.4) : nScrollHeadInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

line 3472 (v1.9.4) : nScrollFootInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

即使在排序和过滤之后它也能工作。

Answer 13

我使用 bootstrap 并用它来管理

<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
     <thead></thead>
     <tbody></tbody>
</table>

Answer 14

我在 Bootstrap 3 中遇到了这个问题，该问题与我在应用 Bootstrap 样式后添加的 th 和 td 元素上的左右填充有关。删除我的左右填充解决了我的情况的问题。

Answer 15

我们可以使用 css 和 sDom 中的微小更改来处理此问题。

在 css 文件中添加以下类，

.scrollDiv {
    max-width:860px; //set width as per your requirement
    overflow-x:scroll;  
}

将表的 sDom 属性中的“t”替换为 <"scrollDiv"t>并删除表的scrollX属性

保存并享受！ :)

Answer 16

我发现宽度在第一个窗口滚动中会错位，因此解决方案是在第一个滚动时仅请求新的表格绘制。

const $table = $('#table').DataTable({ ... });

$(window).on('scroll', () => {
  $(window).off('scroll');
  $table.tables().draw();
});

编辑：也可与setTimeout 函数配合使用。这取决于错位发生的时间。

$table.tables().draw() 是这里的关键。

Answer 17

我也面临同样的问题。我通过从数据表属性中删除 'sScrollY':'405px' 并使用 fixed 解决了这个问题标题。

Answer 18

JS

$('#<%=gridname.ClientID%>').dataTable( {                   

           "paging":         false
            });        

        });

然后在 gridview 上方添加一个 div 元素，如下所示。

  <div style ="height:600px; overflow:auto;"> 
  <asp:GridView ID="id" runat="server" DataKeyNames="key" ClientIDMode="Static" HeaderStyle-BackColor="#99ccff"
        BorderStyle="Inset" BorderWidth="1px" CellPadding="4" HorizontalAlign="Center" AutoGenerateColumns="false" Width="98%"  >
etc..
</div>

Answer 19

不确定我是否有完全相同的问题。我正在处理一个非常大的表，有 40 多列，并且使用水平和垂直滚动。但是，如果浏览器窗口设置得很大，以至于您可以看到整个表格，则列标题左对齐，表格内容位于中间。

我注意到在 Firebug 中，通过 DataTables 表格的宽度已达到 1352px。将其设置为 100% 使一切都一致！

Answer 20

我知道这是相当老的线程，但我在搜索标题对齐问题时来到这里。结果我需要一个不同的解决方案，所以在这里发布，以便有人会发现它有用。

我刚刚在样式块中添加了以下内容，它解决了问题：

.table {table-layout:auto !important;}

似乎数据表添加了固定布局，因此添加此行使我的标题在滚动时与数据正确对齐

Answer 21

经过长时间的努力，我设法调整它：

1. 在初始化数据表后添加它。避免添加“scrollY/scrollX”，
   并避免启用“scrollCollapse”

 $('#table_id').wrap('<div class="dataTables_scroll" />');

2. 将这些添加到您的 CSS 样式中。

.dataTables_scroll
    {
        position: relative;
        overflow: auto;
        max-height: 200px;/*the maximum height you want to achieve*/
        width: 100%;
    }
  .dataTables_scroll thead{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 2;
  }