如何根据Datatable中的数据自动调整列宽答案

【问题标题】：how to make column width adjust automatically as per the data inside in Datatable如何根据Datatable中的数据自动调整列宽
【发布时间】：2017-04-14 09:02:41
【问题描述】：

我正在创建这样的数据表：

var Master = $('#MasterGrid').DataTable( {
            "data": response,   
            "columns":columns,
            "scrollX": true,                            
            });
        $('#MasterGrid').show();

picture displaying row design is distorted completely as the height of the row is increased because of column string length

由于这个问题，我的表格行高变得不规则，我试图根据列中填充的动态数据调整列宽。我试过使用：

 columnDefs: [
        { width: 200, targets: 0 }
    ],

和

scroller: {
    rowHeight: 30
}

使用滚动条会扭曲我的表格样式picture displaying the distortion in the datatable

我尝试过使用，但桌子上似乎没有任何效果

$('#masterGrid').column.adjust().draw();

【问题讨论】：

现在解决这个问题后，我发现了这个问题，但这里似乎没有任何效果stackoverflow.com/questions/21819900/…

标签： css angularjs laravel datatable

【解决方案1】：

试试这个CSS:

th, td {
  white-space: nowrap;
}

工作Demo

【讨论】：

先生，它有效，但仍与表头不匹配，请在此处查看图片i.stack.imgur.com/dM1up.png
你能重现问题是演示链接吗？我尝试使用长标题值，它工作正常。
现在我遇到了这个问题stackoverflow.com/questions/21819900/…
您是否尝试过链接中的修复？

【解决方案2】：

我通过以下步骤找到了问题的解决方案。 1）通过添加此css修复了行的不规则高度问题。

th, td {
    white-space: nowrap;
}

2) 当我移除 scrollx 时，表格标题列和正文列未对齐问题解决了

var Master = $('#MasterGrid').DataTable( {
    "data": response,   
    "columns":columns,
});

$('#MasterGrid').show();
$('#MasterGrid').wrap("<div class='scrolledTable'></div>");

3) 在 style.css 文件中添加自定义 css

.scrolledTable{ overflow-x: auto; clear:both; }

@Syed Ali Taqi 感谢您的帮助先生！这也解决了这个链接的问题Datatables table header & column data misaligned when using "sScrollY"

【讨论】：