[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;

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s