使用 ScrollY 时数据表头的对齐问题

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 bootstrap吗？

请尝试使用以下脚本

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

在数据表启动后添加以下脚本

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

Answer 2

我知道这个问题已经很老了，但我会提供一个解决方案，以防其他人像我一样在这个页面上偶然发现解决方案。

要解决该问题，您需要添加

scrollX: 100%

并为

scrollY

提供一个值，例如

scrollY: 200

。

所以脚本变成；

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

});

Codepen

上的示例