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

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%' }
  ]
});

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

My way to do it

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

Answer 4

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 5

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 6

I would suggest not using pixels for sWidth, instead use percentages. Like below:

   "aoColumnDefs": [
  { "sWidth": "20%", "aTargets": [ 0 ] }, <- start from zero
  { "sWidth": "5%", "aTargets": [ 1 ] },
  { "sWidth": "10%", "aTargets": [ 2 ] },
  { "sWidth": "5%", "aTargets": [ 3 ] },
  { "sWidth": "40%", "aTargets": [ 4 ] },
  { "sWidth": "5%", "aTargets": [ 5 ] },
  { "sWidth": "15%", "aTargets": [ 6 ] }
],
     aoColumns : [
      { "sWidth": "20%"},
      { "sWidth": "5%"},
      { "sWidth": "10%"},
      { "sWidth": "5%"},
      { "sWidth": "40%"},
      { "sWidth": "5%"},
      { "sWidth": "15%"}
    ]
});

Hope it helps.

Answer 7

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 8

I set the column widths in the HTML markup like so:

    <thead>
        <tr>

            <th style='width: 5%;'>ProjectId</th>
            <th style='width: 15%;'>Title</th>
            <th style='width: 40%;'>Abstract</th>
            <th style='width: 20%;'>Keywords</th>
            <th style='width: 10%;'>PaperName</th>
            <th style='width: 10%;'>PaperURL</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr id="@item.ID">
                <td>@item.ProjectId</td>
                <td>@item.Title</td>
                <td>@item.Abstract</td>
                <td>@item.Keywords</td>
                <td>@item.PaperName</td>
                <td>@item.PaperURL</td>
            </tr>
        }
    </tbody>
</table>

Answer 9

I have tried in many ways. The only way that worked for me was:

The Yush0 CSS solution:

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

Together with Roy Jackson HTML Solution:

    <th style='width: 5%;'>ProjectId</th>
    <th style='width: 15%;'>Title</th>
    <th style='width: 40%;'>Abstract</th>
    <th style='width: 20%;'>Keywords</th>
    <th style='width: 10%;'>PaperName</th>
    <th style='width: 10%;'>PaperURL</th>
</tr>

Answer 10

for who still having issues with 1.9.4 change

//oSettings.aoColumns[i].nTh.style.width = _fnStringToCss(oSettings.aoColumns[i].sWidth);
oSettings.aoColumns[i].nTh.style.minWidth = _fnStringToCss(oSettings.aoColumns[i].sWidth);

Answer 11

If you ever need to set your datatable column's width using CSS ONLY, following css will help you :-)

HTML

<table class="table table-striped table-bordered table-hover table-checkable" id="datatable">
    <thead>
    <tr role="row" class="heading">
        <th width="2%">
            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                <input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" />
                <span></span>
            </label>
        </th>
        <th width=""> Col 1 </th>
        <th width=""> Col 2 </th>
        <th width=""> Col 3 </th>
        <th width=""> Actions </th>
    </tr>
    <tr role="row" class="filter">
        <td> </td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_1"></td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_2"></td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_3"></td>
        <td>
            <div class="margin-bottom-5">
                <button class="btn btn-sm btn-success filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
            </div>
            <button class="btn btn-sm btn-default filter-cancel"><i class="fa fa-times"></i> Reset</button>
        </td>
    </tr>
    </thead>
    <tbody> </tbody> 
</table>

Using metronic admin theme and my table id is #datatable as above.

CSS

#datatable > thead > tr.heading > th:nth-child(2),
#datatable > thead > tr.heading > th:nth-child(3) { width: 120px; min-width: 120px; }

Answer 12

$(document).ready(function() {
    $("#ratesandcharges1").dataTable({
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: true
    } ); 
} );

https://datatables.net/reference/option/columns.width