14

我有一个简单的例子来说明我的问题。我正在使用数据表 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>
4

5 回答 5

7

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

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

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

于 2019-01-31T09:43:14.667 回答
6

试试这个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
} );
于 2016-05-03T06:57:54.077 回答
0

对我有用的是

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

在我创建表的 Jquery 中。

于 2020-10-09T23:48:34.817 回答
0

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

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

于 2018-01-05T11:07:46.130 回答
0

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

于 2019-08-05T17:54:22.103 回答