jQuery DataTables: How to Force Specific Column Widths CodeUnit 16 AUG 2010

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can specify what column widths to use in your DataTables implementation, instead of relying on the default auto column widths assigned by the plugin.

Firstly, you need to turn off DataTable’s built in auto column width calculator by feeding it a false value for the bAutoWidth switch when initialising your DataTable object. Next, you need to feed the column widths you wish to use directly into the initialization by means of the aoColumns definitions, making use of the sWidth switch to specify the width.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"bAutoWidth": false,
"aoColumns": [{"sWidth":"60%"},{"sWidth":"20%"},{"sWidth":"20%"}]
} );


Related Link: http://datatables.net/

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.

  • Lalitha Sharma

    I have tried this change but there is no effect..the table columns are still auto-aligned..can this be due to CSS restrictions? please help.. i need to set different width for Datatable columns in jquery..

  • Frank

    Once you add a fixed header datatables no longer respects sWidth, anybody got a solution for that?

  • Shrikant

    Hi I have added the width it is working fine on browsers but it is not working when I export the table into the pdf format. did I have to made some changes for that.