[css] Table set fixed column width

Background : Using JQuery Datatable generated dynamically table but push columns off the layout.

Example :
Image 1

Solution :
Add table-layout to the css, and of course give width to each column :

table-layout: fixed;
word-wrap:break-word;

The reason why :
Fixed table layout algorithm:
The horizontal layout only depends on the table’s width and the width of the columns, not the contents of the cells
Allows a browser to lay out the table faster than the automatic table layout
The browser can begin to display the table once the first row has been received

Ref from : w3schools

Advertisements