数据表标头未对齐

Question

下图显示了在单击文本框（搜索/过滤器..）之前数据表未对齐的标题。一旦后者成为焦点，标题将再次对齐。我注意到，当scrollY关闭时，标题很好，我需要将其打开。任何想法如何解决它。在以下代码段中，只需更改分页选项，即可再次看到标题的重新排列。

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

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/>
<input id="btn" type="button" value="Click ME!" />


<div style="display:none">
  <div id="mdl" class="panel-body">
    <input id="RegSrcsrcctl" type="text" />
    <input id="bt1" type="button" value="dummy search" />
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none" style="width:100%">
      <thead>
        <tr>
          <th></th>
          <th><b>File Number</b></th>
          <th><b>Patient Name</b></th>
          <th><b>DOB</b></th>
          <th><b>Age</b></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

Answer 1

我注意到表格宽度未对齐的原因是由于该宽度被显式设置为100px初始值，而不是正确计算出的宽度。这可能无法解决当前的问题，但是一种解决方法是将table和包装div元素强制为width:100%。这样做确实适用于我测试过的场景，但是请注意，这可能会导致某些响应行为出现问题。调整是添加以下css：

.dataTables_scrollHeadInner{
  width:100% !important;
}
.dataTables_scrollHeadInner table{
  width:100% !important;
}

更新：

好的，我看了一些类似的问题，这与您的表以模式显示的事实有关。模态全视图仅在设置数据表后才呈现，因此列大小可能会出现问题，直到您强制执行操作以重绘它，例如更改窗口大小或选择数据表选项之一。解决方案是调用columns().adjust()模态的打开事件，因此在显示模态后重新绘制表。因此，我看了一下您正在使用的dockmodal库的文档。我发现您可以指定要在open事件中调用的函数，该函数在模式选项中定义。进行此更改可解决此问题，无需更改CSS。看一下更新的代码：

.dataTables_scrollHeadInner{
  width:100% !important;
}
.dataTables_scrollHeadInner table{
  width:100% !important;
}

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