水平滚动时数据表标题未与列对齐答案

【问题标题】：datatables header not aligned with columns when scrolling horizontally水平滚动时数据表标题未与列对齐
【发布时间】：2019-07-18 18:12:25
【问题描述】：

我想不出解决这个问题的方法。我尝试添加“table-layout:fixed”，但它不再适用于 dt 的当前版本。

谢谢

var config = {
        "bFilter": false,           
        "bInfo": false,
        "bPaginate": true,
         "scrollY": 200,
         "table-layout":fixed,
        "data": dataoMine, 
        "bAutoWidth": false,
        "columns": columns,
        "scroller": true,
        "language": {
            "emptyTable": "empty data"
        }, 
        "columnDefs": [
            {"className": "dt-center", "targets": "_all"}
        ]       
    };

<table class="dataTable" style="width:80%; height:100%; margin-left:10%; margin-right:10%;}">
<thead><tr>
    <th>a1</th>
    <th>a2</th> 
    <th>a3</th>
    <th>a4</th>
    <th>a5</th>
    <th>a6</th>
    <th>a7</th>
    <th>a8</th>
</tr></thead>
</table>

【问题讨论】：

你能用小提琴重现这个吗？这是一个起点 -> jsfiddle.net/0f9Ljfjr/819
@davidkonrad 没什么特别的，只是将配置变量传递给 dt 的构造函数。就是这样
可以显示表格的html代码吗？
@Yuri 我已经更新了帖子以包含它，谢谢
@PrefijoSustantivo 数据源也不错，所以也许您可以发布一小部分源数组

标签： datatables

【解决方案1】：

我没有足够的信息给你一个肯定的答案，因为你没有告诉我们你的 columns 变量中有什么，也没有告诉我们你的 dataoMine 数组的结构。但是，从您的屏幕截图中可以清楚地看出您有四列数据，并且还指定了八列。这将显示所有列以及缺失数据列的任何背景。大概，您的“理发店条纹”是您使用的任何主题的页面背景。

确保您的数据中的列数与列规范中的列数相同，看看这是否能解决您的问题。

【讨论】：

【解决方案2】：

经过研究发现这个问题很常见。似乎没有明确的解决方案，但这对我有用：

将此添加到 dt 的配置中：

scrollX：100%

【讨论】：

【解决方案3】：

我通过添加解决了我的问题

scrollX: 真

【讨论】：