Jquery datatable calculates wrong width

Question

I have a jquery datable which i initialize as follows:

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

Then i add rows dynamically like this:

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

The table is set up within a jquery dialog which i initialize as follows:

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

My Problem: If i open the dialog something is completely messed up with the column width. Although i specify maxWidth as 800px the columns do not apply to that and take as much horizontal space as their content (meaning they are either too small or too wide).

Question: How can i always FORCE my columns to stay at the exact width which i specifiy when initially creating the table NO MATTER about the content width i insert later on?

Answer 1

Try this css:

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