dataTable标头未对齐 [英] dataTable Headers Misaligned

问题描述

好的，所有，
交流中的很多问题我都遇到类似的情况，但是我仍然没有找到解决方案，而且似乎没有用。首先，一个解释：
我在可折叠手风琴控件内使用dataTable。 HTML在下面。

OK All, I have a similar situation to a lot of questions in the exchange, but I still have not found the solution, and it seems nothing works. First, an explanation: I an using a dataTable inside a collapsible accordion control. HTML is below.

<div class="row">
  <div class="col-lg-12">
    <table width="100%" class="table table-striped table-bordered table-hover" id="sTable">
      <thead>
        <tr>
          <th>
            <center><button type="button" title="Delete All" onclick="delAll();" class='btn btn-danger btn-sm btn-inline'><i class="fa fa-trash-o fa-1x"></i></button></center>
          </th>
          <th>Slot Number</th>
          <th>Date</th>
          <th>Time</th>
          <th>Flight</th>
          <th>Location</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd gradeX">
          <td align="center">
            <button type="button" title="Delete" onclick="del();" class='btn btn-danger btn-sm btn-inline'><i class="fa fa-trash-o fa-1x"></i></button>
          </td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

在代码底部我有以下jscript：

and I have the following jscript at the bottom of the code:

$('#sTable').DataTable( {
  scrollY: "250px",
  scrollCollapse: true,
  paging: false,
  info: true,
  searching: false,
  ordering: false
});

无论我做什么，我都无法使标题与主体对齐。但是，当我以任何方式调整浏览器屏幕时，它们会对齐！？！？

no matter what I do - I cannot get the headers to align with the body. However, when I "adjust" the browser screen in any way, they align!?!?

想法？我已经尝试了StackExchange中已被视为答案的所有内容……无济于事。

Ideas? I have tried everything in StackExchange that already was noted as an answer...to no avail.

非常感谢！

推荐答案

Sasang

仅在设置数据表后才呈现模态全视图，因此列大小可能会出现问题，直到您强制执行操作来重绘它，例如更改窗口大小或选择一个数据表选项。解决方案是在模式的打开事件上调用column（）。adjust（）。

The modals full view is only rendered after the datatable is set up, so there can be issues with column sizing until you force an action to redraw it, like changing the window size or selecting one of the datatable options. The solution is to call columns().adjust() on the open event of the modal,

我想您可能有相同的选择可折叠的手风琴控件出现问题，只需尝试在打开事件上调用column（）。adjust（）

I think you might have the same issue with the collapsible accordion control, Just try to call columns().adjust() on the open event

var table = $('#RegSrc').DataTable({
  dom: "<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>",
  select: true,
  scrollY: 200,
  deferRender: true,
  //scrollY:     500,
  responsive: false,
  fixedHeader: {
    header: true,
    footer: true
  },
  "processing": true,
  "serverSide": false,
  bAutoWidth: true,
  data: [],
  rowCallback: function(row, data) {},
});
$("#btn").click(function() {
  $("#mdl").dockmodal({
    open: function() {
      table.columns.adjust();
    }
  });
})

请参阅此链接以获取更多信息。

Please refer to this link for more info.

数据表标题未对齐

这篇关于dataTable标头未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！