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

Posted 2023-05-08

【中文标题】使用 ScrollY 时数据表标题的对齐问题

【英文标题】：Alignment Problem with Datatable Header when use ScrollY

【发布时间】：2021-09-02 22:03:23

【问题描述】：

我的数据表标题对齐有问题。在我不使用 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 视图

【参考方案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

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

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

【讨论】：

我试过了，你的建议，但问题还是一样。请参阅codepen.io/adiicmp/pen/abJMEdz 现在单击复选框。这就是我试图解释的。当侧边菜单折叠并将内容区域向右移动时，标题将超出页面。

@Aditya 如果您的数据表没有使用 FixedColumns，只需删除 ScrollY，并使用标签 div table-responsive。检查这个：codepen.io/mocfaisal/pen/xxqebaO

我必须使用 scrollY 因为我想为数据表提供一个固定的高度，并且所有的记录都会反映在那个特定的固定高度框架框中。如果没有 Scroll Y，用户需要滚动页面。这就是 ScrollY 很重要的原因。