Javascript jQuery 数据表标题与垂直滚动不对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8607290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Datatables Header Misaligned With Vertical Scrolling
提问by dennis.sheppard
I've posted this in the datatables.net forums, but after a week, still no response. Hopefully I can find help here...
我已经在 datatables.net 论坛上发布了这个，但一周后，仍然没有回应。希望我能在这里找到帮助......
I'm using datatables version 1.8.1 and am having nightmares over column header alignment with vertical scrolling enabled.
我正在使用数据表 1.8.1 版，并且在启用垂直滚动的情况下对列标题对齐做噩梦。
With the code posted below, the headers line up correctly in Firefox and IE8 and IE9, but Chrome and IE7 are off. I'm using a lotof datatables on this project, and this is a problem with every one. I'm desperate for help!
使用下面发布的代码，标题在 Firefox 和 IE8 和 IE9 中正确排列，但 Chrome 和 IE7 已关闭。我在这个项目中使用了很多数据表，这是每个人的问题。我迫切需要帮助！
EDIT: I have figured out that this has something to do with setting the width of the table. The datatable takes the width of its container. If I set no width, everything lines up fine (but the table is too big for where I need it on the page). If I give the table's div (or a parent div somewhere higher up) a width at all, the headers don't line up properly.
编辑：我发现这与设置表格的宽度有关。数据表采用其容器的宽度。如果我没有设置宽度，一切都会很好地排列（但表格对于页面上我需要的地方来说太大了）。如果我给表格的 div（或更高位置的父 div）一个宽度，标题不会正确排列。
Thanks!!
谢谢！！
Screenshots:
截图：
www.dennissheppard.net/firefox_alignment.png
www.dennissheppard.net/firefox_alignment.png
www.dennissheppard.net/chrome_alignment.png
www.dennissheppard.net/chrome_alignment.png
www.dennissheppard.net/ie7_alignment.png
www.dennissheppard.net/ie7_alignment.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"> </td>
</tr>
</thead>
<tbody class="">
<!-- loaded data will go here -->
</tbody>
</table>
采纳答案by tmanthey
I had the problem and it turned out to be a side effect with my CSS. Try to disable all external css and see if the problem persists.
我遇到了问题，结果证明是我的 CSS 的副作用。尝试禁用所有外部 css 并查看问题是否仍然存在。
回答by broadband
I'm having the same problem here. It works fine (pixel-perfect column aligned) in Mozilla Firefox, Opera but not in Chrome 21.
我在这里遇到了同样的问题。它在 Mozilla Firefox、Opera 中工作正常（像素完美的列对齐），但在 Chrome 21 中无效。
Solution:
解决方案：
Like mentioned in this post http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
就像这篇文章中提到的http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
Basically what is happening, is that DataTables is trying to read the width of the table, that the browser has drawn, so it can make the header match. The problem is that when DataTables does this calculation on your page, the browser hasn't shown the scrollbar - and hence the calculation is slightly wrong! The reason I suggest that it's a Webkit bug, is that, even after DataTables has run through all of it's logic, the scrollbar still hasn't been displayed. If you add the following code you can see the effect of this:
console.log( $(oTable.fnSettings().nTable).outerWidth() ); setTimeout( function () { console.log( $(oTable.fnSettings().nTable).outerWidth() ); }, 1 );
基本上发生的事情是，DataTables 正在尝试读取浏览器绘制的表格的宽度，因此它可以使标题匹配。问题是，当 DataTables 在您的页面上执行此计算时，浏览器并未显示滚动条 - 因此计算略有错误！我认为这是一个 Webkit 错误的原因是，即使在 DataTables 运行完所有逻辑之后，滚动条仍然没有显示。如果添加以下代码，您可以看到这样的效果：
console.log( $(oTable.fnSettings().nTable).outerWidth() ); setTimeout( function () { console.log( $(oTable.fnSettings().nTable).outerWidth() ); }, 1 );
The interesting part is that after I added setTimeout and after it executed there was still one column not aligned. After adding "sScrollX": "100%", "sScrollXInner": "100%" all columns were aligned (pixel-perfect).
有趣的是，在我添加 setTimeout 并执行之后，仍然有一列未对齐。添加 "sScrollX": "100%", "sScrollXInner": "100%" 后，所有列都对齐（像素完美）。
Solution for Chrome/Chromium, works ofcource in FF, Opera, IE9:
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 );
});
回答by Sharjeel Ahmed
I solved this problem by wrapping the "dataTable" Table with a div with overflow:auto
我通过用溢出的 div 包装“dataTable”表解决了这个问题：auto
.dataTables_scroll
{
overflow:auto;
}
and add this JS after your dataTable initialization
并在 dataTable 初始化后添加此 JS
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
Dont use sScrollX or sScrollY, remove then and add a div wrapper yourself which does the same thing.
不要使用 sScrollX 或 sScrollY，然后删除然后自己添加一个 div 包装器来做同样的事情。
回答by Gkrish
var table = $("#myTable").DataTable({
"sScrollY": "150px",
//"bAutoWidth": false // Disable the auto width calculation
});
$(window).resize( function () {
table.columns.adjust();
} );
回答by user4190052
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
Worked perfect for me!
非常适合我！
回答by Kunmi
I had a similar issue, but mine resizes to fit after searching or sorting or interacting with the table in a way to cause a redraw, tried the redraw...function but no luck had to improvise in the end. The funny fix I that worked for me was calling oTable.fnFilter( "x",0 )and oTable.fnFilter( "",0 )in this same order (search and clear search)... this works...lol.. :)
我有一个类似的问题，但我的在搜索或排序或以某种方式与表格交互后调整大小以导致重绘，尝试了重绘......功能，但最终没有运气不得不即兴发挥。我为我工作的有趣修复是调用oTable.fnFilter( "x",0 )并oTable.fnFilter( "",0 )以相同的顺序（搜索和清除搜索）......这有效......大声笑...... :)
回答by Daniel
this might help you (not sure but i guess that its worth trying)
这可能对你有帮助（不确定，但我想这值得一试）
add this code to the page
将此代码添加到页面
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
taken from here width columns problem in Chrome & Safari
Also, i guess it worth trying to define the columns in the constructor only instead of defining them in the (leave tag empty)
另外，我想值得尝试仅在构造函数中定义列，而不是在（将标记留空）中定义它们
回答by Beniston
I also had this problem. After many different tries I tried the below and succeeded.
我也有这个问题。经过多次不同的尝试，我尝试了以下方法并成功了。
I tried adding label tag with the float property in the style attribute. Then it worked find.
我尝试在 style 属性中添加带有 float 属性的标签标签。然后它找到了。
For example:
例如：
<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>
回答by pat capozzi
I had a problem where the data in the columns was too large to fit and there was no place in the data for a line break. My solution was to add a div with an overflow and a title attribute like this:
我遇到了一个问题，列中的数据太大而无法容纳，并且数据中没有用于换行的地方。我的解决方案是添加一个带有溢出和标题属性的 div，如下所示：
<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>
This caused the table to settle down almost completely.
这导致桌子几乎完全安定下来。
回答by NinjaOnSafari
if you are using bootstrap:
如果您使用引导程序：
.table {
width: 100%;
max-width: none; // >= this is very important
}
