Datatables.net ScrollX |标题和数据列宽度问题

Question

我试图为datatables.net表组件创建包装器，它根据表中定义的类创建和启用功能数据表。

$('table.data-table').each(function() { 
    var props = {};
    if ($(this).hasClass('select') && $(this).hasClass('multi'))
        props.select = 'multi';
    else if ($(this).hasClass('select')
        props.select = 'single';
    if ($(this).hasClass('long-table')
        props.scrollX = true;
    ...
    ...
    ...
    $(this).DataTable(props);
});

就像上面基于表格DataTable中为每个HTML表格启用的功能定义的类一样。

测试案例1：表格应该填满它的容器。

测试案例2：滚动不应造成错位。

我的问题是，如果我设置scrollX: true测试用例1失败并且测试用例2成功。

如果我忽略scrollX: true Testcase 1成功且测试用例2失败。 什么是可能的解决方案，使两个文本案例成功。我已经尝试设置scrollX: '100%'，但没有任何结果。

我不希望使用解决方案，只将long-grid类添加到第二个网格，并在第一个网格上自动忽略scrollX:true。因为我们知道表中有多少列，但不知道数据中存在的字符串长度以及页面呈现的屏幕大小，这是为了响应应用程序。

欢迎任何解决方案或CSS黑客。

Answer 1

忘记scrollX，请使用针对此问题提出的解决方案：

Header columns misaligned with DataTable when scrollX is enabled

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

Answer 2

我不了解未对齐的信息，但是使用scrollX: true会使表无法填充其容器。为避免这种情况，请在您的style="width:100%"中设置table Datatables Flexible table width

另一种解决方案是将您的 .table 包装在 .table-sensitive 中 Bootstrap Responsive tables

我希望这对某人有帮助。