Question

我有一个简单的问题示例。我正在使用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>

Answer 1

试试这个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
} );

Answer 2

相反，如果使用“scrollX”：true 在div中移动数据表： <div class='scroll'></div>

并添加CSS： div.scroll { overflow:auto; }

Answer 3

我有同样的问题。我使用了这个配置

 "scrollY": "650px",
 "sScrollX": "100%",
 "scrollCollapse": true,

使用 scrollCollapse 来确保数据量少，底部或页脚不会停留在指定的高度。

Answer 4

将其移动到div标签中，然后向样式中添加position:relative ;overflow:auto; height:500px;。

Answer 5

对我有用的是

"sScrollX": "100%",
"sScrollXInner": "110%",

在创建表的Jquery中。

数据表 - 水平滚动时，列标题不会移动

5 个答案: