Jquery数据表计算出错误的宽度

Question

我有一个 jquery datable，我初始化如下：

$('#tableElement').DataTable(
    {
        "columns" : [
            {
                "width" : "40%"
            },
            {
                "width" : "40%"
            },
            {
                "width" : "20%"
            }
        ],        
        fixedColumns: true
    });

然后我像这样动态添加行：

table.row.add([
            subProductName,
            fileName,
            "<div class='deletePosition' style='color:red; cursor: pointer;'>&#10006;</div>"
        ])
        .draw()
        .node();

table 在 jquery 对话框中设置，我初始化如下：

$('#dialogElement').dialog({
        autoOpen : false,
        title : "Some title",
        show : "blind",
        modal : true,
        resizable : false,
        scrollbar : false,
        maxWidth: "800px"
});

我的问题：如果我打开对话框，列宽会完全混乱。尽管我将 maxWidth 指定为 800px，但这些列不适用于该列，并且水平 space 与其内容一样多（这意味着它们太小或太宽）。

问题：我如何始终强制我的列保持在我最初创建时指定的确切宽度 table 不管我稍后插入的内容宽度如何？

Answer 1

试试这个 css：

#tableElement{
 table-layout: fixed; 
  word-wrap:break-word; 
}

Jquery数据表计算出错误的宽度

Jquery datatable calculates wrong width

jquery

css

datatables

jquery-ui-dialog