title: Datatables - Setting column width
body: <p>I'm trying to set up width of columns as shown below:</p>
  
  <pre><code> 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;
            });
        }
      }
    })
  </code></pre>
  
  <p>But resulting column width is not that i'm trying to set. could you help me please?</p>
  
  <p><strong>Update 1</strong> </p>
  
  <p>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. </p>
  
  <pre><code>  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;
            });
        }
      }
    })
  </code></pre>
  
  <p><strong>Update 2</strong><br>
  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 <a href="http://gyazo.com/282967b051366b18634d4e778205c938" rel="noreferrer">http://gyazo.com/282967b051366b18634d4e778205c938</a>
  init code:</p>
  
  <pre><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;
            });
        }
      }
    })
  </code></pre>
  
  <p>How can I fix this behavior ?</p>