我的程序中有一个数据表.我希望它可以水平滚动,所以我做的是这样的：
var tableI = $('#table_data').DataTable({
"bLengthChange": false,"scrollX": true,"dom": 'frtp'
});
就像这样(作为示例输出)：
编辑：
这是另一个例子：
这是我的HTML代码：
<table class="table table-striped" id="act_data" width="100%"> <div style="float:left;width:385px" >
<button type="button" id="edit_acc" class="btn btn-primary" data-toggle="modal" data-target="#editAcc"><span class=" fa fa-edit "> Edit Account</span></button>
<button type="button" id="de_act" class="btn btn-primary" data-toggle="modal" data-target="#DeAcc"><span class=" fa fa-edit "> Activate/Deactivate</span></button>
<!-- <button type="button" id="refresh" class="btn btn-link" data-target="#DeAcc"><span class="fa fa-refresh"></span></button>-->
<a href="<?PHP echo site_url('admin/homeAdmin/homepage')?>?id=6" class="btn btn-link"><span class="fa fa-refresh"></a>
</div><thead class="header">
<tr class="well">
<th style="font-size: 14px;">Employee ID#</th>
<th style="font-size: 14px;">Username</th>
<th style="font-size: 14px;">Account Type</th>
<th style="font-size: 14px;">Status</th>
</tr>
</thead>
<tbody>
<?PHP if($result != NULL){?>
<?PHP foreach($result as $row){ ?>
<tr>
<td style="font-size: 15px;padding-left: 20px;">
<?PHP echo $row->employeeID;?>
<input type="hidden" name="userID" id="userID" value="<?PHP echo $row->userID;?>" />
<input type="hidden" name="pass" id="pass" value="<?PHP echo $row->password;?>" />
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?PHP echo $row->username;?>
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?PHP echo $row->usertype;?>
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?PHP echo $row->status; ?>
</td>
</tr>
<?PHP }?>
<?PHP }?>
</tbody>
</table>
解决方法
我和firefox&有同样的问题firefox开发者版.根本原因是,当我们设置scrollX：true时,datatable会添加一个额外的div,其中包含一个表和一个标题,除了表和&标头已经构建.这是为了在表格效果中滚动.
Datatable,尝试将高度设置为0px,以隐藏它.有些浏览器没有正确解释这一点.
<tr style="height: 0px;" role="row">
要隐藏它,将此行的样式更改为“隐藏”将破坏表的结构.工作解决方案是：具有可见性：’崩溃’
示例数据表配置：
tableElement.DataTable({
"scrollX": true,"initComplete": function(settings,json) {
$('.dataTables_scrollBody thead tr').css({visibility:'collapse'});
}
//other datatable configurations...
});
因为它是一张桌子,我们需要具有可见性：’崩溃’而不是可见性：’隐藏’ – 更多关于visibility css property的信息
