标题/数据列未与 jQuery dataTables、bootstrap 2.3.2 对齐并启用水平滚动
Posted
技术标签:
【中文标题】标题/数据列未与 jQuery dataTables、bootstrap 2.3.2 对齐并启用水平滚动【英文标题】：header/data columns are not aligned with jQuery dataTables, bootstrap 2.3.2 and horizontal scrolling enabled 【发布时间】：2013-10-21 03:31:50 【问题描述】：使用 dataTables 启用水平滚动并使用 bootstrap 2.3.2 会导致标题和数据列对齐不同步 - dataTables 使用两个单独的表来提供水平滚动。
看这个例子： html：
<html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<table id="teamTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Team Member</th>
<th>Balancing Team & Individual Priorities</th>
<th>Conscientiousness</th>
<th>Relating to Others</th>
<th>Preference for Teamwork</th>
<th>Problem Solving</th>
<th>Effort</th>
<th>Relying on Others</th>
<th>Balancing Work Tasks & Relationships</th>
<th>Work Life Balance</th>
<th>Assertiveness</th>
<th>Time Urgency</th>
<th>Pacing Style</th>
<th>Resolving Conflict</th>
<th>Avoiding Judgement</th>
<th>Seeking Approval</th>
<th>Learning</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td>Alexandra Slater</td>
<td><p><a href="#">Team Focus</a></p></td>
<td><p><a href="#">Preparer</a></p></td>
<td><p><a href="#">Relationship Prioritizer</a></p></td>
<td><p><a href="#">Balanced Worker</a></p></td>
<td><p><a href="#">Enthusiastic Theorist</a></p></td>
<td><p><a href="#">Marathon Runner</a></p></td>
<td><p><a href="#">Three Musketeer</a></p></td>
<td><p><a href="#">Relationship Builder</a></p></td>
<td><p><a href="#">Work-Life Balancer</a></p></td>
<td><p><a href="#">Behind The Scenes</a></p></td>
<td><p><a href="#">Measured Progresser</a></p></td>
<td><p><a href="#">Last Minute</a></p></td>
<td><p><a href="#">Adaptor</a></p></td>
<td><p><a href="#">Hidden Light</a></p></td>
<td><p><a href="#">Diamond</a></p></td>
<td><p><a href="#">Eternal Student</a></p></td>
</tr>
<tr>
<td>MIKE FEENEY</td>
<td><p><a href="#">Team Balancer</a></p></td>
<td><p><a href="#">Work Horse</a></p></td>
<td><p><a href="#">Relationship Prioritizer</a></p></td>
<td><p><a href="#">Balanced Worker</a></p></td>
<td><p><a href="#">Enthusiastic Theorist</a></p></td>
<td><p><a href="#">Marathon Runner</a></p></td>
<td><p><a href="#">Independent</a></p></td>
<td><p><a href="#">Relationship Builder</a></p></td>
<td><p><a href="#">Work-Life Balancer</a></p></td>
<td><p><a href="#">Part of the Cast</a></p></td>
<td><p><a href="#">Sprinter</a></p></td>
<td><p><a href="#">Last Minute</a></p></td>
<td><p><a href="#">Persuader</a></p></td>
<td><p><a href="#">Revealer</a></p></td>
<td><p><a href="#">Sparkler</a></p></td>
<td><p><a href="#">Eternal Student</a></p></td>
</tr>
<tr>
<td>Gary Crowe</td>
<td><p><a href="#">Team Balancer</a></p></td>
<td><p><a href="#">Preparer</a></p></td>
<td><p><a href="#">Relationship Prioritizer</a></p></td>
<td><p><a href="#">Team Player</a></p></td>
<td><p><a href="#">Enthusiastic Theorist</a></p></td>
<td><p><a href="#">Marathon Runner</a></p></td>
<td><p><a href="#">Double Checker</a></p></td>
<td><p><a href="#">Relationship Builder</a></p></td>
<td><p><a href="#">Work-Life Balancer</a></p></td>
<td><p><a href="#">Part of the Cast</a></p></td>
<td><p><a href="#">Measured Progresser</a></p></td>
<td><p><a href="#">Steady</a></p></td>
<td><p><a href="#">Adaptor</a></p></td>
<td><p><a href="#">Revealer</a></p></td>
<td><p><a href="#">Sparkler</a></p></td>
<td><p><a href="#">Eternal Student</a></p></td>
</tr>
<tr>
<td>Josh Rammell</td>
<td><p><a href="#">Team Focus</a></p></td>
<td><p><a href="#">Preparer</a></p></td>
<td><p><a href="#">Go with the Flow</a></p></td>
<td><p><a href="#">Team Player</a></p></td>
<td><p><a href="#">Enthusiastic Theorist</a></p></td>
<td><p><a href="#">Marathon Runner</a></p></td>
<td><p><a href="#">Double Checker</a></p></td>
<td><p><a href="#">Relationship Builder</a></p></td>
<td><p><a href="#">Work-Life Balancer</a></p></td>
<td><p><a href="#">Behind The Scenes</a></p></td>
<td><p><a href="#">Measured Progresser</a></p></td>
<td><p><a href="#">Last Minute</a></p></td>
<td><p><a href="#">Persuader</a></p></td>
<td><p><a href="#">Revealer</a></p></td>
<td><p><a href="#">Diamond</a></p></td>
<td><p><a href="#">Eternal Student</a></p></td>
</tr>
<tr>
<td>Luke Uijtenhaak</td>
<td><p><a href="#">Team Focus</a></p></td>
<td><p><a href="#">Preparer</a></p></td>
<td><p><a href="#">Relationship Prioritizer</a></p></td>
<td><p><a href="#">Team Player</a></p></td>
<td><p><a href="#">Reluctant Philosopher</a></p></td>
<td><p><a href="#">Marathon Runner</a></p></td>
<td><p><a href="#">Three Musketeer</a></p></td>
<td><p><a href="#">Relationship Builder</a></p></td>
<td><p><a href="#">Work-Life Balancer</a></p></td>
<td><p><a href="#">Behind The Scenes</a></p></td>
<td><p><a href="#">Measured Progresser</a></p></td>
<td><p><a href="#">Last Minute</a></p></td>
<td><p><a href="#">Persuader</a></p></td>
<td><p><a href="#">Revealer</a></p></td>
<td><p><a href="#">Diamond</a></p></td>
<td><p><a href="#">Eternal Student</a></p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
JS：
var tableId = 'teamTable';
var oTable = $('#' + tableId).dataTable(
"sScrollX": "100%",
<!-- "sScrollXInner": "150%", -->
"bScrollCollapse": true,
"bPaginate": false
);
<!-- new FixedColumns(oTable); -->
这是 JSFiddle 上的测试用例，http://jsfiddle.net/tazmaniax/KFxbL/，以及相关的调试信息http://debug.datatables.net/unovum
在这个测试用例中，我使用了数据表 1.9.4 和最新的数据表引导 css 和 js 文件 (https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/2)。我还用 dataTables 1.10 进行了测试，没有任何改进。
最终我还想启用 "sScrollXInner": "150%" 和 FixedColumns，但这样做只会让事情变得更糟。
我已将其交叉发布到 dataTables 论坛，http://datatables.net/forums/discussion/comment/52776#Comment_52776
2013 年 15 月 10 日更新：
显然，问题归结为 M30 分支中 Chrome 中的一个错误，该错误是作为优化的一部分引入的。现在正在分发修复程序。 见http://datatables.net/forums/discussion/17714#Item_15 见https://code.google.com/p/chromium/issues/detail?id=290399
【问题讨论】：
我在加载你的小提琴时没有看到问题。标题和数据一起滚动。 OSX 10.8.5 上的 Chrome。 这里看起来也不错 - chrome、FF 和 opera。 @Daiku 感谢您检查小提琴，您使用的是哪个版本的 Chrome？ @davidkonrad 您使用的是什么操作系统和 Chrome 版本？谢谢 ubuntu 和 chrome 版本 18.0.1025.168 【参考方案1】：我在同样的问题上苦苦挣扎，在阅读了很多帖子后，这里是如何“解决”问题的。
添加到 CSS 中：
.scrollStyle overflow-x:auto;
调用dataTable后在视图中添加：
jQuery('.dataTable').wrap('<div class="scrollStyle" />');
例如。 oTable = $('#myDataTable').dataTable( );
$(window).bind('resize', function ()
oTable.fnAdjustColumnSizing();
);
jQuery('.dataTable').wrap('<div class="scrollStyle" />');
【讨论】：
以上是关于标题/数据列未与 jQuery dataTables、bootstrap 2.3.2 对齐并启用水平滚动的主要内容，如果未能解决你的问题，请参考以下文章
Jquery DataTable列顺序未与固定标题对齐[重复]