使用ScrollY时Datatable标题的对齐问题

Question

我有一个数据表头对齐的问题。在我没有使用ScrollY之前，一切都会很好。

在页面上，我有一个侧边导航栏，可以扩展。现在，当我展开侧面导航栏并将内容区移向右侧时，表格标题就会移出页面。

1. Table:
 <table  class="flex-fill flex-grow-1 table table-striped table-hover table-bordered " id="data_table" style="background:red ;width: 100%">
         <thead>
           <tr>    
              <th>Header-1</th>
              <th>Header-2</th>
              <th>Header-3</th>
              <th>Header-4</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>             
           </tr>           
         </tbody>
        </table>


2. Script.

$(document).ready( function () {
   $('#data_table').DataTable( {
    paging: true,
    ordering:false,
    scrollY:315,
    scrollCollapse:true,
    scrollX:true
   });
});

html视图

​

​

Answer 1

你在使用css引导吗？

请尝试使用以下脚本

Html

<div class="table-responsive">
  <table class="flex-fill flex-grow-1 table table-striped table-hover table-bordered" id="data_table" style="background:red ;width: 100%">
    <thead>
      <tr>
        <th>Header-1</th>
        <th>Header-2</th>
        <th>Header-3</th>
        <th>Header-4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

Javascript

在datatable初始化后添加以下脚本

table.columns.adjust().draw();

脚本将如下所示

$(document).ready(function () {
  var table = $("#data_table").DataTable({
    paging: true,
    ordering: false,
    scrollY: 315,
    scrollCollapse: true,
    scrollX: true
  });

  table.columns.adjust().draw();
});

示例：codepen