Datatables - Setting column width

Question

I'm trying to set up width of columns as shown below:

 var per_page = $("table").data("per_page");
  $(".table").dataTable({
    "aoColumnDefs": [
      { "sWidth": "100px", "aTargets": [ 1 ] },
      { "sWidth": "100px", "aTargets": [ 2 ] },
      { "sWidth": "100px", "aTargets": [ 3 ] },
      { "sWidth": "100px", "aTargets": [ 4 ] },
      { "sWidth": "100px", "aTargets": [ 5 ] },
      { "sWidth": "100px", "aTargets": [ 6 ] },
      { "sWidth": "100px", "aTargets": [ 7 ] }
    ],
    "aoColumns" : [
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
    ],
    bJQueryUI: true,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) {
      if (oSettings._iDisplayLength == per_page)
        return true
      else {
        $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
          .done(function(data){
            if (data.success)
              per_page = oSettings._iDisplayLength;
          });
      }
    }
  })

But resulting column width is not that i'm trying to set. could you help me please?

Update 1

I've updated my initialization code as follows, but bumped into strange behavior on IE 9: Ie takes the longest field, devides it into lines , and takes it's length as default for all rows of this column.

  var per_page = $("table").data("per_page");
  $(".table").dataTable({
    sScrollX: "100%",
    aoColumns : [
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
    ],
    bJQueryUI: true,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) {
      if (oSettings._iDisplayLength == per_page)
        return true
      else {
        $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
          .done(function(data){
            if (data.success)
              per_page = oSettings._iDisplayLength;
          });
      }
    }
  })

Update 2
I've updated code as shown below, the result in ie 9 is that the heading of the datatable is resized to new size, but the rest of the table is untouched by changes , see screenshot http://gyazo.com/282967b051366b18634d4e778205c938 init code:

  var per_page = $("table").data("per_page");
  var datTable = $(".table").dataTable({
    sScrollX: "100%",
    sScrollX: "500px",
    aoColumnDefs: [
          { bSortable: false, aTargets: [ 4, 5,6 ] },
          { sWidth: "16%", aTargets: [  1, 2,3,4,5,6 ] },
    ],
    bJQueryUI: true,
    sAutoWidth: false,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) {
      if (oSettings._iDisplayLength == per_page)
        return true
      else {
        $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
          .done(function(data){
            if (data.success)
              per_page = oSettings._iDisplayLength;
          });
      }
    }
  })

How can I fix this behavior ?

Answer 1

This is the only way i could get it working:

JS:

columnDefs: [
            { "width": "100px", "targets": [0] }
        ]

CSS:

#yourTable{
    table-layout: fixed !important;
    word-wrap:break-word;
}

The CSS part isn't nice but it does the job.

Answer 2

you should use "bAutoWidth" property of datatable and give width to each td/column in %

 $(".table").dataTable({"bAutoWidth": false , 
aoColumns : [
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "10%"},
    ]
});

Hope this will help.

Answer 3

You can define sScrollX : "100%" to force dataTables to keep the column widths :

..
 sScrollX: "100%", //<-- here
 aoColumns : [
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
    ],
...

you can play with this fiddle -> http://jsfiddle.net/vuAEx/

Answer 4

I can tell you another simple way to fix the width of data table in html itself.

use

<colgroup>
    <col width="3%">
    <col width="3%">
</colgroup>

here is a sample code of data table below:

         <table class="table datatable">
                                <colgroup>
                                    <col width="33%">
                                    <col width="33%">
                                    <col width="33%">
                                    <col width="33%">
                                </colgroup>
                                   <thead>
                                        <tr>
                                            <th>User Id</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                        </tr>
                                    </thead>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                            </table>

Answer 5

I see in your Update 2 that you have use sAutoWidth, but I think you mistyped bAutoWidth. Try to change this.

You can also add a CSS rule to .table if the problem persists.

You should also be careful when the width of the content is greater than the header of the column.

So something like the combination of the 1 & 2:

$('.table').dataTable({
  bAutoWidth: false, 
  aoColumns : [
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '10%' }
  ]
});