Jquery数据表标题与正文不对齐

Posted 2023-05-07

【中文标题】Jquery数据表标题与正文不对齐

【英文标题】：Jquery datatable header not aligned with body with

【发布时间】：2019-08-27 01:32:09

【问题描述】：

当用户单击链接按钮时，我有主页，它应该打开带有学生详细信息的模型弹出窗口。表格格式的所有详细信息。如果他们想向上滚动表格，标题应该保留，只有行应该移动。

我在 Jquery 中使用 scrollY: true 和 fixed header true 完成了这项工作。问题出在启用此代码之后。标题未与正文列固定。如果删除 scrolly: true 它工作正常。

如果我搜索某些内容，它会立即对齐，就像我对任何列排序然后立即对齐一样。主要问题是当表单加载时它与标题和正文不对齐

主页

<div class="modal-body">
  @html.Partial("_SubtoolPage")
</div>

模型弹出代码

<div>
<div class="panel-body modelpopup-scroll">
  <table id="StudTask" class="table-striped table table-bordered ">
    <thead>
     <tr>
     <th>ID</th>
    <th>Name</th>
   <th>Marks</th>
  </tr>
 </thead>

 <tbody>
   fetch row code.......
 </tbody>
</table>
</div>
</div>

脚本代码

<script>
$(document).ready(function () 
var table= $('#StudTask').dataTable(
"fixedHeader": true,
"scrollCollapse": true,
"scrollY": "600px",
"scrollX": "100%",
"paging": false,
"order": [[2, 'asc']]
);

</script>

我也尝试过以下方法

 //$('#RealTask').DataTable().columns.adjust();
 //$("#RealTask").DataTable().search("ss").draw();

我也参考了这个链接：

Link referred to

我已经尝试过但我无法解决的所有问题。如果您有更好的想法，请您提出建议。

谢谢！

【参考方案1】：

您是否尝试过从上部 DIV 中删除这两个类“panel-body modelpopup-scroll”。

希望你解决这个问题。如果不是在表格绑定后调用$(window).trigger('resize');。

喜欢：

setTimeout(function() $(window).trigger('resize'); , 500);