html - 数据表标题未对齐

Question

好的， 我在交流中有很多问题类似的情况，但我仍然没有找到解决方案，而且似乎没有任何效果。首先解释一下: 我在可折叠 Accordion 控件中使用数据表。 HTML 如下。

<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:

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

无论我做什么 - 我都无法让标题与正文对齐。但是，当我以任何方式“调整”浏览器屏幕时，它们会对齐!？!？

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

提前致谢!

Answer 1

Sasang

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,

我认为您可能对可折叠 Accordion 控件有同样的问题，只需尝试在打开事件上调用 columns().adjust()

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();
    }
  });
})

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

Datatables header misalignment