数据表 - 水平滚动时列标题不移动
Posted
技术标签:
【中文标题】数据表 - 水平滚动时列标题不移动【英文标题】：Datatables - Column Headers don't move when scrolling horizontally 【发布时间】：2013-06-07 08:43:42 【问题描述】：我有一个简单的例子来说明我的问题。我正在使用数据表 1.9。当数据表位于另一个 html 表中时，列标题不会在水平滚动时移动。当它不在 html 表中时，它工作正常。我的示例实际上取自他们关于水平滚动的示例，但我添加了外部表格。任何帮助，将不胜感激。我到处寻找答案。这是代码。谢谢
<head>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.dataTables.min.js"></script>
</head>
<form>
<table>
<tr>
<td>
<div id="demo">
<table id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</form>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
$(document).ready(function()
$('#example').dataTable(
"sScrollX": "100%",
"sScrollXInner": "110%"
);
);
</SCRIPT>
【问题讨论】：
这是你的代码jsfiddle.net/CHPqb/1的小提琴，请你更清楚地解释你的代码和数据表网站上的示例之间到底有什么区别？ 您的小提琴准确地显示了问题。他们的示例没有外部 html 表。如果你删除| 和 |
我有同样的问题。我使用了这个配置
"scrollY": "650px",
"sScrollX": "100%",
"scrollCollapse": true,
使用 scrollCollapse 确保如果数据较少，底部或页脚不会停留在指定高度。
【讨论】：
这对我有用！谢谢，我还制作了scrollY = '100vh',，所以它会扩展以适应屏幕的长度。【参考方案2】：
试试这个http://jsfiddle.net/CHPqb/23/
我添加了一个 css 代码，而不是 sScrollXInner 我将其更改为 scrollX : true
th, td
white-space: nowrap;
div.dataTables_wrapper
width: 80%;
margin: 0 auto;
$('#example').dataTable(
"sScrollX": "100%",
"scrollX": true
);
【讨论】：
【参考方案3】：如果使用 "scrollX": true 在 div 内移动数据表：
<div class='scroll'></div>
并添加 CSS：
div.scroll
overflow:auto;
【讨论】：
为什么这样更好？【参考方案4】：将其移动到 div 标签中，并将position:relative ;overflow:auto; height:500px; 添加到样式中。
【讨论】：
【参考方案5】：对我有用的是
"sScrollX": "100%",
"sScrollXInner": "110%",
在我创建表的 Jquery 中。
【讨论】：
以上是关于数据表 - 水平滚动时列标题不移动的主要内容，如果未能解决你的问题，请参考以下文章