使用“scrollX”时数据表标题和正文错位答案

【问题标题】：Datatables header and body mislignment when using 'scrollX'使用“scrollX”时数据表标题和正文错位
【发布时间】：2020-06-09 03:53:23
【问题描述】：

我对数据表插件非常陌生，当我使用scrollX 加载要在表中显示的数据时，列标题和正文未对齐。

这是我的代码。

<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>
<body>
<div class="form-row">
    <div class="form-group col-md-12">
      <div id="contact_div" style="padding:10px;">
         <table class="table table-hover table-sm table-striped" id="contact_table">
            <thead class="thead-dark">
             <tr>
             <th scope="col">Customer Name</th>
             <th scope="col">Contact Name</th>
             <th scope="col">Phone Number</th>
             <th scope="col">Email</th>
             <th scope="col">Action Select</th>
             </tr>
             </thead>
          </table>
       </div>
      </div>
    </div>
</body>
</html>
<script>
 $(document).ready(function() {
        var table = $('#contact_table').DataTable({
            "serverside":true,
            "processing": true,
            "scrollX":true,
            "ajax": 'load_table_data',
        });
    })
</script>

【问题讨论】：

标签： html jquery datatables

【解决方案1】：

您需要将#example 更改为您自己的ID，即#contact_table。你用了#example你没有，你需要用#contact_table

另外，确保table 的th 和td 数量相等，因为DataTables 需要well organized 表。

 $(document).ready(function() {
    var table = $('#contact_table').DataTable({
        "serverside":true,
        "processing": true,
        "scrollX":true,
        "ajax": 'load_table_data',
    });
})

这里是jsfiddle

【讨论】：

感谢您的回复，我已经编辑了我的代码，但它仍然无法正常工作
您检查过fiddle 吗？正如我所提到的，您正在加载的表格应该组织良好，也就是说，它应该有正确的th 和td，它们的数量应该相等，而不是不匹配。请分享您正在加载的table html。