dataTables – 无法获得水平滚动和固定列来完成它们的工作。 似乎在各处呈现不同。 我究竟做错了什么？
我花了两个小时试图解决这个问题。 我需要创建一个几乎与此链接上显示的表相同的表：
https://datatables.net/extensions/fixedcolumns/
它在垂直和水平方向上滚动，同时保持柱子固定在侧面。 最后，我想把正确的列固定而不是左边，但这不是我现在的问题。
我的问题是，尽管有function的.js，它对列进行排序并且几乎完成它应该做的一切，甚至使用相同的CSS，中间容器 – 应该水平滚动的容器 – 不会。 垂直滚动工作得很好。 它显然在示例中工作，并且.js几乎应该在构建表后处理所有内容。 现在，我只想在尝试从左列切换到右列之前让它工作。 如果你可以同时帮助我，那就更好了，但正如我所说的，不是目前至关重要的。
http://jsfiddle.net/biggest/WCpYx/6/
//jquery $(document).ready( function () { var oTable = $('#example').dataTable( { "sScrollY": "300px", "sScrollX": "100%", "sScrollXInner": "150%", "bScrollCollapse": true, "bPaginate": false } ); new FixedColumns( oTable ); } ); //HTML Rendering engine Browser Platform(s) Engine version CSS grade Rendering engine Browser Platform(s) Engine version CSS grade Trident Internet Explorer 4.0 Win 95+ 4 X Trident Internet Explorer 5.0 Win 95+ 5 C Trident Internet Explorer 5.5 Win 95+ 5.5 A Trident Internet Explorer 6 Win 98+ 6 A Trident Internet Explorer 7 Win XP SP2+ 7 A Trident AOL browser (AOL desktop) Win XP 6 A Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A Gecko Firefox
1.5 Win 98+ / OSX.2+ 1.8 A Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A Gecko Camino 1.0 OSX.2+ 1.8 A Gecko Camino 1.5 OSX.3+ 1.8 A Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A Gecko Netscape Browser 8 Win 98SE+ 1.7 A Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A Gecko Epiphany 2.20 Gnome 1.8 A Webkit Safari 1.2 OSX.3 125.5 A Webkit Safari 1.3 OSX.3 312.8 A Webkit Safari 2.0 OSX.4+ 419.3 A Webkit Safari 3.0 OSX.4+ 522.1 A Webkit OmniWeb 5.5 OSX.4+ 420 A Webkit iPod Touch / iPhone iPod 420.1 A Webkit S60 S60 413 A Presto Opera 7.0 Win 95+ / OSX.1+ - A Presto Opera 7.5 Win 95+ / OSX.2+ - A Presto Opera 8.0 Win 95+ / OSX.2+ - A Presto Opera 8.5 Win 95+ / OSX.2+ - A Presto Opera 9.0 Win 95+ / OSX.3+ - A Presto Opera 9.2 Win 88+ / OSX.3+ - A Presto Opera 9.5 Win 88+ / OSX.3+ - A Presto Opera for Wii Wii - A Presto Nokia N800 N800 - A Presto Nintendo DS browser Nintendo DS 8.5 C/A KHTML Konqureror 3.1 KDE 3.1 3.1 C KHTML Konqureror 3.3 KDE 3.3 3.3 A KHTML Konqureror 3.5 KDE 3.5 3.5 A Tasman Internet Explorer 4.5 Mac OS 8-9 - X Tasman Internet Explorer 5.1 Mac OS 7.6-9 1 C Tasman Internet Explorer 5.2 Mac OS 8-X 1 C Misc NetFront 3.1 Embedded devices - C Misc NetFront 3.4 Embedded devices - A Misc Dillo 0.8 Embedded devices - X Misc Links Text only - X Misc Lynx Text only - X Misc IE Mobile Windows Mobile 6 - C Misc PSP browser PSP - C Other browsers All others - - U
这是一个显示问题的方法。 奇怪的是，hoz-scroll实际显示在这里（它在我的本地示例中完全没有），但它仍然不允许左（渲染引擎）列保持放置，并扩展整个表，这就像你可以在示例链接中看到，它不应该这样做。
我还要提一下，这是在一个Bootstrap环境中完成的，从我到目前为止所读到的，dataTables和Bootstrap应该可以很好地协同工作。 我以为某个地方可能会有一个禁用水平滚动的样式，但我还没有发现任何差异。
此外，在进一步检查时，在左边的列上应该有一个class =“DTFC_LeftWrapper”，它没有出现在jsfiddle示例中，这可能就是为什么hoz-bar一直向左延伸的原因。 我不知道为什么它不会显示在那里，但在本地文件和示例链接中都会显示。
从我能够确定的，class =“dataTables_scrollBody”中的表没有扩展到它被包含在class =“dataTables_scroll”中的div，这似乎也没有出现在jsfiddle版本中。 在本地版本上，任何强制它在外面的尝试，只会扩大div的宽度。
我不知道，我只想尽可能多地给你。
任何有关这方面的帮助将不胜感激。
我认为您需要设置要在初始化程序中修复的列数…
new FixedColumns( oTable, { "iLeftColumns": 0, "iRightColumns": 1 } );
此信息来自http://www.datatables.net/extras/fixedcolumns/options
谢谢@Biggest，关于自举表宽度的观点导致了我们的解决方案。 至少在chrome中， auto不起作用，但没有 ，所以我们只是将它添加到我们的.less表中：
table{ max-width: none }
最新版本的JQuery已弃用$.browser 。 积极开发的插件包括检查if($.browser && $.browser.msie))而不是if($.browser.msie)) 。 您可以通过其中一个解决您的问题
-
在项目中包含$ .browser 。
-
使用旧版本的JQuery。
-
使用$ .browser的Patch FixedColumns.js像其他人一样进行检查。
使用旧版本的JQuery时，您的jsfiddle可以正常工作。