数据表标题对齐方式调整

时间:2018-11-26 14:30:43

标签: javascript jquery css3 datatables

我正在模式弹出窗口中使用数据表。当我打开按钮上的弹出窗口时,单击标题(即桌子的主题)不会将其自身调整为桌子的整个宽度。下面是两种情况,它们会相应地进行调整。

1-打开弹出窗口,thead未对准,然后只需打开chrome开发人员工具并关闭它们,现在theads将自动对准。见图一

2-在chrome开发人员工具也打开的情况下打开弹出窗口,现在theads不能正确对齐,现在只是从右上角调整窗口大小,然后将theads完美对齐。见图二

有人可以告诉我这里发生了什么吗?我还要附上下面的图像和代码。

 var table = $('#available-linguists').DataTable( {
      "dom": '<fl<t>ip>',
      "paging": false,
      "bInfo" : false,
      "scrollY": "250px",
      "scrollCollapse": true,
 });

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

尝试在显示模式时触发columns.adjust()

table.columns.adjust();
  

提供此方法是为了让DataTables根据表中的数据和应用于列的大小(在DOM,CSS中或通过columns.width参数)重新计算列的大小。 在表格可见(如果在初始化(例如,在选项卡中)时隐藏)或数据发生显着变化时调用它。

还请注意,在这些相同的文档中还提到了调整窗口大小时各列神奇地对齐的原因:

  

DataTables将在窗口调整大小事件上自动调用此方法,以使列与重新排列的布局保持同步。