column width does not work with multiple tables

alextang

I have two tables (same columns) on two tabs on the same html page. I use Ajax to populate both tables and specify column width using

"columnDefs": [
...
{
"targets": 3,
"width": "40%",
"data" : 'description'
},
]

Both tables has the same columnDefs. The first table rendered correctly. However, When I clicked the second tab, the second table did not take the specified column width into account. When I tried use a horizontal scrollbar ("scrollX": true). The column header and columns of the second table did not align.

How do I fix it?