javascript - 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/

标签： javascriptjquerydatatables

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 DataTablescrollX选项：

$(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>