我有一个简单的问题例子.我正在使用Datatables 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>
试试这个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
} );
我有同样的问题。我使用了这个配置
"scrollY": "650px",
"sScrollX": "100%",
"scrollCollapse": true,
使用scrollCollapse确保如果数据较少，底部或页脚不会停留在指定的高度。