Question

我正在创建数据表：

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();

Answer 1

试试这个CSS：

th, td {
  white-space: nowrap;
}

正在使用 Demo

Answer 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"

如何根据Datatable

2 个答案: