jQuery DataTables 使用 scrollX、部分宽度容器和 Bootstrap 的 table-sm 类时列宽不正确

Question

DataTables 遇到了一个奇怪的问题。基本上，我所拥有的是一个不是全宽的容器，并且在该 div 内我有 table 元素：

<div style="width: 50%;">
    <table id="example3" class="display nowrap table table-bordered table-striped table-sm" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>
</div>

我正在初始化表格：

$(document).ready(function() {
    var data = [];
    for (var i = 0; i < 10000; i++) {
        data.push([i, i, i, i, i]);
    }

    $('#example3').DataTable({
        data: data,
        scrollX: true
    });
});

现在，我希望这会起作用，但我最终得到的是：

注意标题列如何与数据不匹配。

如果我删除“table-sm”类或者容器/表格的宽度为 100%，这将非常有效。我尝试了其他方法，例如手动更新列 (table.columns.adjust())，但似乎没有任何效果。

有人对如何解决这个问题有任何见解或想法吗？

jsFiddle 显示问题：https://jsfiddle.net/vnbm8eh0/

Answer 1

在寻找和挣扎了一个小时甚至更多之后，似乎罪魁祸首是table-sm。如果我删除它，一切似乎都可以正常工作：

这是一个例子：

$(document).ready(function() {
  var data = [];
  for (var i = 0; i < 10000; i++) {
    data.push([i, i, i, i, i]);
  }
  
  $('#example3').DataTable({
    data: data,
    scrollX: true
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>

<div style="width:50%; margin: 0 auto;">
  <!-- Add "table-sm" to the class list of the table -->
  <table id="example3" class="display nowrap table table-bordered table-striped" style="width:100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>ZIP / Post code</th>
        <th>Country</th>
      </tr>
    </thead>
  </table>
</div>

如果您必须/喜欢使用table-sm 类，这里有另一种解决方案，尽管不使用jQuery DataTable scrollX 选项：

$(document).ready(function() {
  var data = [];
  for (var i = 0; i < 10000; i++) {
    data.push([i, i, i, i, i]);
  }
  
  $('#example3').DataTable({
    data: data
  });
});

 #example3 {
    overflow-x: scroll;
    max-width: 40%;
    display: block;
    white-space: nowrap;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>

<div style="width:50%; margin: 0 auto;">
  <!-- Add "table-sm" to the class list of the table -->
  <table id="example3" class="display nowrap table table-bordered table-striped table-sm" style="width:100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>ZIP / Post code</th>
        <th>Country</th>
      </tr>
    </thead>
  </table>
</div>