时间戳

首页 > 解决方案 > 使用 ScrollY 时数据表标题的对齐问题

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

问题描述

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

在此处输入图像描述

标签： htmljquerycssdatatablescroll

解决方案

你在使用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();
});

示例：代码笔

推荐阅读