I have a table that is empty until the user do some actions. The problem is that when the table is empty, the column have one width and when the table has content (some inputs on td) the width changes. What i want is to keep the column size fixed, that is, the same column size when the table is empty and when it has content.

The following code shows de Datatable configuration. That widths shown are what i need but, for example, when the table is empty, the first column has width of 114px

tabla = $('#tabla').DataTable({
    language: {
        url: '/recursos/estilos/DataTables-1.10.1/js/locale/es_AR.json'
    },          
    "bSort": false,
    "bAutoWidth": false,
     aoColumns : [
      { "sWidth": "104px"},
      { "sWidth": "263px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "33px"},
    ]
}); 

I have a table that is empty until the user do some actions. The problem is that when the table is empty, the column have one width and when the table has content (some inputs on td) the width changes. What i want is to keep the column size fixed, that is, the same column size when the table is empty and when it has content.

The following code shows de Datatable configuration. That widths shown are what i need but, for example, when the table is empty, the first column has width of 114px

tabla = $('#tabla').DataTable({
    language: {
        url: '/recursos/estilos/DataTables-1.10.1/js/locale/es_AR.json'
    },          
    "bSort": false,
    "bAutoWidth": false,
     aoColumns : [
      { "sWidth": "104px"},
      { "sWidth": "263px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "33px"},
    ]
}); 

• javascript
• jquery
• html
• css
• datatables

• Try putting sScrollX: "100%", as datatable paramter – Bhushan Kawadkar Commented Aug 12, 2014 at 12:35
• assign any one columns width as auto. – Suresh Ponnukalai Commented Aug 12, 2014 at 12:37

3 Answers 3

I SOLVED THE PROBLEM just adding divs on th width fixed widths.

In the table definition i had this HTML with the Datatable configuration shown on the question:

<thead>
    <tr>                            
        <th>Code</th>
    </tr>
    <tr>                            
        <th>Description</th>
    </tr>
</thead>

What i did now, is to add divs on the HTML:

<thead>
    <tr>                            
        <th><div style="width: 100px;">Codigo</div></th>
    </tr>
    <tr>                            
        <th><div style="width: 300px;">Description</div></th>
    </tr>
</thead>

And the current Datatable configuration is:

tabla = $('#tabla').DataTable({
    language: {
        url: '/recursos/estilos/DataTables-1.10.1/js/locale/es_AR.json'
    },          
    "bSort": false
});

1. set autoWidth: false;
2. set px values to first 3 columns; important: check if the table width is a bit more than 3 columns + final one;

3. adjust the table width and 4th column.

   $('#example').DataTable({ //four column table
       autoWidth: false, //step 1
       columnDefs: [
          { width: '300px', targets: 0 }, //step 2, column 1 out of 4
          { width: '300px', targets: 1 }, //step 2, column 2 out of 4
          { width: '300px', targets: 2 }  //step 2, column 3 out of 4
       ]
   });
   

Specifying a fixed column width in jQuery Datatables

you can define a CSS class to your column like this :

aoColumns : [ { "sClass": "my_class" }]

And in your CSS :

.my_class 
{
    overflow:hidden;
    width:200px;
}