固定列标题宽度与主体列宽不匹配

标题与列宽不对齐。 JsFiddle 。

截图

我正在使用：

• ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css
• ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css
• datatables.net/release-datatables/media/js/jquery.js
• datatables.net/release-datatables/media/js/jquery.dataTables.js
• datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js

这是我正在使用的代码：

JS：

$(document).ready(function() { var aoColumns = [null,null,null,null,null,null,null,null,null,null,null]; var oTable = $('#example').dataTable( { "sScrollX": "100%", "sScrollXInner": "150%", "bPaginate": false, "bAutoWidth": false, "aoColumns": aoColumns } ); var oFC = new FixedColumns( oTable, { "iLeftColumns": 4 } ); oTable.fnAdjustColumnSizing(); }); 

HTML：

  
 
 
 
 
Branch
 
Object
 
Address
 
Count
 
Availability
 
 
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
 
 
 
 
United States of America, Washington
 
ABC-123
 
1514 Amber Pond Highway, Nohead Bottom, Washington, 99205-8224, US, [phone]
 
7
 
-
-
-
 
-
-
-
-
 
 
 
United States of America, South Dakota
 
DEF-456
 
7827 Stony Pointe, Sunsweet, South Dakota, 57006-2156, US, [phone]
 
7
 
-
-
-
 
-
-
-
-
 
 
 
United States of America, Newfoundland
 
XYZ-549
 
2379 Dewy Pioneer Highlands, Humbug, Newfoundland, A7O-6P5, CA, [phone]
 
7
 
-
-
-
 
-
-
-
-
 
 
 
United States of America, Washington
 
GHI-789
 
5842 Easy Bay, Kravaksarak, Washington, 98428-9376, US, [phone]
 
7
 
-
-
-
 
-
-
-
-
 
 
 
 
  

Answer 1

当数据包包含水平填充时，它会错误计算宽度。

我通过从th中删除填充来解决这个问题，在其中添加一个span，然后将填充添加到span。

即。

像这样更改标记：

  Branch Object  

Answer 2

问题是由sScrollX滚动条引起的，它为右侧的列添加了额外的水平空间，这就是为什么其他的（没有滚动条）在标题上变短的原因。

如果您对sScrollX行进行注释，则列会正确对齐。

—更新—

要使用js修复宽度，这将起作用：

 // *** FIX WIDTHS ON LEFT SIDE *** var widths = []; // first fix widths on tbody ... $('.DTFC_LeftBodyWrapper thead th').each( function(){ $(this).css('width', $(this).width()); }); // ... now save the actual widths on array $('.DTFC_LeftBodyWrapper thead th').each( function(){ widths.push($(this).width()); }); // ... and now update widths on thead $('.DTFC_LeftHeadWrapper thead th').each( function(i, val){ console.log('i:', i, ', width:', widths[i]); $(this).css('width', widths[i]); }); 

我更新了一个jsfiddle

注意：我也将Count更改为Cnt ，因为它在jsfiddle窗口上太长了，这导致了额外的宽度问题。

Answer 3

我可以通过将th的边距和填充重置为零来解决它：

 th { padding: 0 !important; margin: 0 !important; }