jQuery数据表头部与垂直滚动不对齐

我这里也有同样的问题。它在Mozilla Firefox, Opera中工作良好(像素完美的列对齐)，但在Chrome 21中不行。

解决方案:

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

基本上发生了什么，是datatable试图读取表的宽度，浏览器已经绘制，所以它可以使标题匹配。问题是，当数据表这样做计算页面时，浏览器没有显示滚动条- and因此计算有一点错误!我建议的原因是这是Webkit的一个bug，即使在datattables运行了所有之后在它的逻辑中，滚动条仍然没有显示。如果你加上下面的代码可以看到这样做的效果:

console.log($(oTable.fnSettings().nTable).outerWidth());setTimeout(function () {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 );
});

我通过用溢出:auto的div包装"dataTable"表来解决这个问题

.dataTables_scroll
{
    overflow:auto;
}

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

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

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

我遇到了这个问题，原来是我的CSS的副作用。尝试禁用所有外部css，看看问题是否仍然存在。

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

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

非常适合我!

我有一个类似的问题，但我的调整大小以适应搜索或排序或与表交互后的方式导致重绘，尝试重绘…有功能但没有运气最后只能临时凑合。我为我工作的有趣的修复是按相同的顺序调用oTable.fnFilter( "x",0 )和oTable.fnFilter( "",0 )(搜索和清除搜索)…这是…lol . .:)

这可能会帮助你(不确定，但我想这值得一试)

将此代码添加到页面

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

从这里取宽度列问题在Chrome &Safari

另外，我想它值得尝试在构造函数中定义列，而不是在(左标记为空)

我也有这个问题。经过多次尝试，我尝试了以下方法并成功了。

我尝试在style属性中添加带有float属性的标签标签。

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

我遇到了一个问题，列中的数据太大而无法适应，并且数据中没有换行的地方。我的解决方案是添加一个带有溢出和标题属性的div，像这样:

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

这使得桌子几乎完全安定下来。

如果使用bootstrap:

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

我是这样解决这个问题的:

我通常使用它在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存储数据表对象。

在firefox中出现同样的问题，我改变了一点脚本jquery像这样(在jquery. datatable .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";

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

我使用bootstrap，我用这个管理

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

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

我们可以使用css和sDom中的小改动来处理这个问题。

在css文件中添加以下类

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

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

保存并享受!

我发现宽度会在第一个窗口滚动不对齐，所以解决方案是，在第一个滚动只请求一个新的表绘制。

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

Edit:也适用于setTimeout函数。这取决于不对齐发生的时间。

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

我也面临同样的问题。我通过从datatable属性中删除'sScrollY':'405px'并使用固定头来解决它。

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>

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

我注意到在firebug中，表已经通过DataTables获得了1352px的宽度。将其设置为100%可以使所有内容对齐!

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

我只是在我的样式块中添加了以下内容，它解决了这个问题:

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

似乎数据表增加了固定的布局，所以添加这一行使我的标题与数据正确对齐时滚动

经过长时间的斗争，我设法调整它:

1. 在初始化数据表后添加。避免添加" scrollly/scrollX"并避免启用"scrollCollapse"

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

.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;
  }