Question

我的程序中有一个数据表。我希望它可以水平滚动，所以我做的就像这样：

var tableI = $('#table_data').DataTable({
    "bLengthChange": false,
    "scrollX": true,
     "dom": 'frtp'
});

它是这样的（作为样本输出）： enter image description here

标题增加了一倍。我该怎么解决这个问题？

编辑：这是另一个例子： enter image description here

这是我的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＆amp;有同样的问题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...  
        });

因为它是一张桌子，我们需要具有可见性：'崩溃'而不是可见性：'隐藏' - 关于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

div.dataTables_scrollBody thead {           
    display: none;
}

Answer 5

就我而言，解决方案很简单。只需在您的CSS中添加它即可：

import java.util.{List => JList, ArrayList => JArrayList}

@Configuration
@ConfigurationProperties("kafka")
class AppConfig {

 @BeanProperty
 var bootstrapServers: JList[String] = new JArrayList[String]

 def getBootStrapServer: JList[String]  = bootstrapServers
}

Answer 6

尝试这样的事情：

“scrollX”：'100％'，

“scrollXInner”：'125％'，

Answer 7

这对我有用：

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

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

Answer 8

最好的方法是使用

dataTable.columns.adjust();

在初始化/绘制回调上

Answer 9

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

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

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

Answer 10

在 Javascript 文件中的行下方添加。 serverSide: true, processing: true, scrollX : "100%", 将下面的代码添加到您的页面。 .dataTables_scrollBody thead tr[role="row"]{ 可见性：折叠 !important;

Answer 11

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

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

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

11 个答案: