Question

我正在创建一个在x和y方向上滚动的表格。问题是当我向下滚动时标题被隐藏了。我究竟做错了什么？如何避免呢？

代码 -

JS -

$(document).ready(function() {
    $('#myTable01').dataTable({
        "iLoadGap" : 0,
        "bPaginate" : false,
        "bInfo" : false,
        "bFilter" : false,
        "bSort" : true,
        "aaSorting" : [ [ 1, "desc" ] ],
        "aoColumns" : [ null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null ]
    });
});

身体部位 -

<div class="data"  style="width:1180px; height:510px; overflow:auto;">

<table id="myTable01" width="100%" cellpadding="0" cellspacing="0"  style="margin: 0;padding-bottom:0;padding-top:0">
<thead   >
<tr >                                                           
<th  align="left"   rowSpan="1" colSpan="1"> col1 </th>
<th  align="left"   rowSpan="1" colSpan="1"> col2 </th>                     
<th  align="left"   rowSpan="1" colSpan="1">col3 </th>
<th  align="left"   rowSpan="1" colSpan="1">col4 </th>
<th  align="left"   rowSpan="1" colSpan="1">col5 </th>
<th  align="left"   rowSpan="1" colSpan="1">col6 </th>
<th  align="left"   rowSpan="1" colSpan="1">col7 </th>
<th  align="left"   rowSpan="1" colSpan="1">col8 </th>
<th  align="left"   rowSpan="1" colSpan="1">col9 </th>
<th  align="left"   rowSpan="1" colSpan="1">col10 </th>
<th  align="left"   rowSpan="1" colSpan="1">col11</th>
<th  align="left"   rowSpan="1" colSpan="1">col12 </th>
<th  align="left"   rowSpan="1" colSpan="1">col13 </th>
<th  align="left"   rowSpan="1" colSpan="1">col14 </th>
<th  align="left"   rowSpan="1" colSpan="1">col15 </th>
<th  align="left"   rowSpan="1" colSpan="1">col16 </th>
<th  align="left"   rowSpan="1" colSpan="1">col17 </th>
<th  align="left"   rowSpan="1" colSpan="1">col18 </th>
<th  align="left"   rowSpan="1" colSpan="1">col19 </th>
<th  align="left"   rowSpan="1" colSpan="1">col20 </th>
<th  align="left"   rowSpan="1" colSpan="1">col21 </th>
<th  align="left"   rowSpan="1" colSpan="1">col22 </th>
<th  align="left"   rowSpan="1" colSpan="1">col23 </th>
<th  align="left"   rowSpan="1" colSpan="1">col24</th>
<th  align="left"   rowSpan="1" colSpan="1">col25 </th>
 <th  align="left"   rowSpan="1" colSpan="1">col26 </th>
    <th  align="left"   rowSpan="1" colSpan="1">col27 </th>
    <th  align="left"   rowSpan="1" colSpan="1">col28 </th>
    <th  align="left"   rowSpan="1" colSpan="1">col29</th>
    <th  align="left"   rowSpan="1" colSpan="1">col30 </th>
</tr>
</thead>

请帮助

Answer 1

在数据表官方论坛中有一个具体问题

Sticky Row

我没有使用新版本进行测试

Answer 2

我猜你必须使用fixedHeader选项对象

的dataTable选项

 $('#myTable01').dataTable({
    fixedHeader: true
} );

您可以查看此LINK以了解更多相关信息

向下滚动表格修复标题

2 个答案: