使用 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 developer edition 时遇到了同样的问题。根本原因是，当我们设置scrollX:true 时，除了已经构建的表和表头之外，datatable 添加了一个额外的 div，其中包含一个表和一个表头。这是为了获得表格内的滚动效果。

数据表，尝试将高度设置为 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...  
});

因为它是一张桌子，我们需要visibility:'collapse' 而不是visibility:'hidden' - 有关visibility css property 的更多信息

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

我在 Google Chrome 上遇到了同样的问题。这是修复：

.dataTable(
{
  "processing": false,
  "serverSide": false,
  "autoWidth": true,
  "columnDefs": [
    {"orderable": false, "targets": [5, 6]}
  ],
  "order": [1, 'asc'],
  "dom": 'l<"toolbar">frtip',
  drawCallback: function () { // this gets rid of duplicate headers
      $('.dataTables_scrollBody thead tr').css({ display: 'none' }); 
  },
  scrollY: '65vh',
  scrollCollapse: true,
  paging: false
});

Answer 4

就我而言，解决方案很简单。只需将其包含在您的 css 中即可：

/* Override sorting header --> DataTable Bug */
.dataTables_scrollBody > table > thead > tr {
    visibility: collapse;
    height: 0px !important;
}

Answer 5

塞拉姆的解释很好。更好的方法是只使用 CSS

div.dataTables_scrollBody thead {           
    display: none;
}

Answer 6

这会隐藏第二个标题并删除标题和正文之间的空白。

<style>
     .dataTables_scrollBody thead tr {
         visibility: collapse;
     }

     .dataTables_scrollBody {
         margin-top: -10px;
      }
</style>

Answer 7

试试这样的：

"scrollX": '100%',

"scrollXInner": '125%',

Answer 8

这对我有用：

$('#DataTables_Table_0').on( 'draw.dt' function() {
    $('.dataTables_scrollBody thead tr').addClass('hidden')
}

参考：geam's March 2015 answer on datatables.net forum

Answer 9

最好的方法是使用

dataTable.columns.adjust();

关于初始化/绘制回调

Answer 10

在 Javascript 文件中的行下方添加。 serverSide：true，processing：true，scrollX：“100％”，将以下代码添加到您的页面。 .dataTables_scrollBody thead tr[role="row"]{ 可见性：折叠！重要； }

Answer 11

您可以在 CSS 中使用以下代码：

div.dataTables_scrollHeadInner table { margin-bottom: 0px !important; }