数据表标题未对齐答案

【问题标题】：dataTable Headers Misaligned数据表标题未对齐
【发布时间】：2017-02-02 16:10:46
【问题描述】：

好的，我在交流中很多问题都有类似的情况，但我仍然没有找到解决方案，而且似乎没有任何效果。首先，一个解释：我在可折叠的手风琴控件中使用 dataTable。 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 中已经被记录为答案的所有内容...无济于事。

提前感谢！

【问题讨论】：

你能把它的样子贴出来吗？
Nimmi，我很乐意，但似乎我没有足够的优点。我刚注册。但是，将标题行全部“挤压”到左侧。身体很好。
在 imgur 或其他东西上发布指向图像的链接。没有看到就无法弄清楚问题所在。
crm.shooterspost.com/sp1/dtp.png
图片在上面...

标签： html twitter-bootstrap datatables

【解决方案1】：

Sasang

模态完整视图仅在设置数据表后才会呈现，因此在您强制执行某个操作重新绘制它之前，列大小可能会出现问题，例如更改窗口大小或选择数据表选项之一。解决方法是在modal的open事件上调用columns().adjust()，

我认为您可能对可折叠手风琴控件有同样的问题，只需尝试在打开事件上调用 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

【讨论】：