使用Google Chrome时启用scrollX或scrollY时,数据表中会出现重复的空标题

Question

我的程序中有一个数据表.我希望它可以水平滚动,所以我做的是这样的:

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> 

Answer 1

我和firefox和firefox开发者版本有同样的问题.根本原因是,当我们设置时scrollX:true,datatable会添加一个额外的div,其中包含一个表和一个标题,除了已经构造的表和标题.这是为了在表格效果中滚动.

Datatable,尝试将高度设置为0px,以隐藏它.有些浏览器没有正确解释这一点.

<tr style="height: 0px;" role="row"> 

要隐藏它,将此行的样式更改为"隐藏"将破坏表的结构.有工作的解决方案visibility:'collapse'

示例数据表配置:

        tableElement.DataTable({
            "scrollX": true,
            "initComplete": function(settings, json) {
                $('.dataTables_scrollBody thead tr').css({visibility:'collapse'});
            }
            //other datatable configurations...  
        });

因为它是一个表,我们需要具有可见性:'崩溃'而不是可见性:'隐藏' - 有关可见性css属性的更多信息

Answer 2

解决方案1:

要解决这个问题请使用"scrollXInner": true 避免使用"scrollX": true"

var tableI = $('#table_data').DataTable({
    "bLengthChange": false,
    "scrollX": true, //Do Not Use This (Remove This Line)
    "scrollXInner": true //Use This (Add This Line)
     "dom": 'frtp'
});

解决方案2:

或者你可以添加这个 CSS

.dataTables_scrollBody thead tr[role="row"]{
    visibility: collapse !important;
}

Answer 3

尝试这样的事情：

"scrollX": '100%',

"scrollXInner": '125%',