Question

我正在为项目使用jQuery数据表，但存在以下问题：

在第一次加载时，标题行和数据行的列对齐良好。但是，调整窗口大小时，主体单元会缩小或增长，而标题单元会保持恒定的宽度。结果是标题行和主体行未对齐。以下代码用于初始化数据表：

$el.DataTable({
    paging: true,
    lengthChange: true,
    searching: true,
    ordering: true,
    info: true,
    autoWidth: false,
    pageLength: 25,
    columns: getColumns(configurationObject),
    scrollX: true,
    language: localizationObject,
    data: getDataset(configurationObject),
    dom: 'lrtip',
    lengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, localizationObject['allRows']]
    ]
});

并且html如下：

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Description</th>
        </tr>
    </thead>
</table>

为解决此问题，我尝试了以下方法：

将autoWidth设置为true / false
启用/禁用响应式插件

许多答案都围绕着dom加载完成之前正在构造的桌子，或者在一个隐藏的div内，无法计算宽度。这些都不适合我。上面的代码在$(document).ready(function () {}}中被调用，并且在被调用时不会被隐藏（如我所说，初始加载工作正常，但我认为值得一提）。

在调查中，我注意到，对于标题行，创建了一个全新的html表。该行的单元格也具有固定宽度。确实向我解释了这种失调，但是，我还无法真正解决眼前的问题。

我正在尝试实现以下两种情况之一：

主体的列具有固定的宽度，如果表格溢出，则水平滚动将接管。我已将scrollX设置为true，并且在小屏幕上效果很好。
标题行的列的宽度不是固定的，而是正文列的宽度。

希望我已经为某人提供了足够的信息来找到答案，因为我已经在Google上搜索并查找了，但是找不到。如果需要更多信息，请告诉我。

谢谢。

如何让数据表标题随列宽调整？

0 个答案: