时间戳

首页 > 解决方案 > 为什么数据表的标题与内容不对齐？

javascript - 为什么数据表的标题与内容不对齐？

问题描述

我有一个数据表，标题与内容不一致。请帮我调整标题和内容以便平行。因为看起来

]（[！[图片

<div style="margin-top:10px; padding: 10px;">
  <table id="example" class="table display nowrap table-bordered table-striped" style="width:100%;">
    <thead>
      <tr>
        <th>Test1</th>
        <th>Test2</th>
        <th>Test34567</th>
        <th>Test890</th>
      </tr>
    </thead>
    <tbody>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tbody>
  </table>
</div>

$(document).ready(function() {
  $('#example').DataTable({
    scrollX: true
  });
});

标签： javascriptjqueryhtmlcss

解决方案

我知道已经有一段时间了，但解决方案仍然可能对其他人有所帮助，因为我最近遇到了类似的问题，

由于scrollX，这种情况正在发生。您可以将 scrollX 设置为 false 或更新 CSS 以将标题宽度调整为 100%。这可以在 JS 内部完成，

$(document).ready(function() {
    $('#example').DataTable({
    scrollX: true
  });

  //Newly added lines
  $(".dataTables_scrollHeadInner").css( "width", "100%" );
  $(".dataTables_scrollHeadInner table").css( "width", "100%" );

});

该解决方案的灵感来自数据表讨论论坛中发布的答案

推荐阅读