How to set column widths to a jQuery datatable?

Question

I have a jQuery datatable(outlined in red), but what happens is that the table jumps out of the width I have set for the div(which is 650 px).

Here is the screen shot: enter image description here

Here is my code:

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges1").dataTable({
            "bRetrieve": false,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": false,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '10%' } ]
        });

        ratesandcharges1.fnDraw();

    });
</script>
<div id="ratesandcharges1Div" style="width: 650px;"> 


<table id="ratesandcharges1" class="grid" >
    <thead>
        <!--Header row-->
        <tr>
            <th>Charge Code</th>
            <th>Rates</th>
            <th>Quantity</th>
            <th>Total Charge</th>
            <th>VAT %</th>
            <th>Calc. Type</th>
            <th>Paid By</th>
            <th>From</th>
            <th>To</th>
            <th>VAT</th>
            <th>MVGB</th>
         </tr>
    </thead>
    <!--Data row-->
    <tbody>
        <tr>
            <td>Day/Tag</td>
            <td>55.00</td>
            <td>3.00</td>
            <td>165.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Bill-to/Agent</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>33.00</td>
            <td>1.98</td>
        </tr>
        <tr>
            <td>PAI</td>
            <td>7.50</td>
            <td>3.00</td>
            <td>22.50</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.50</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>BCDW</td>
            <td>15.00</td>
            <td>3.00</td>
            <td>45.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>9.00</td>
            <td>0.54</td>
        </tr>
        <tr>
            <td>BTP</td>
            <td>7.15</td>
            <td>3.00</td>
            <td>21.45</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.29</td>
            <td>0.26</td>
        </tr>
    </tbody>
</table>
</div>

Any ideas ?

Thanks

did u try with `width="650px"` instead of `style="width: 650px;"` — xkeshav, Apr 08 '11 at 05:30

score 36 · Answer 1 · edited Oct 25 '13 at 07:55

36

I found this on 456 Bera St. Man is it a lifesaver!!!

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

But - you don't have a lot of room to spare with your data.

CSS FTW:

<style>
table {
    table-layout:fixed;
}
td{
    overflow:hidden;
    text-overflow: ellipsis;
}
</style>

edited Oct 25 '13 at 07:55

Chankey Pathak

21,187
12
85
133

answered Jun 28 '12 at 12:51

John K

361
1
3
3

This solved the problem. Unfortunately, setting the options didn't work, so i welcome this fix. – Sharky Dec 02 '14 at 10:13
3

Great! I don't know why but my code `$('#revTable').dataTable( { "columns": [ { "width": "8%" }, { "width": "12%" }, { "width": "17%" }, { "width": "10%" }, { "width": "15%" }, { "width": "12%" }, { "width": "8%" } ] } );` won't work without your styling above. thanks. – kriscondev May 06 '16 at 05:16
Please correct me if I am wrong. Using this method will surely replace the extra data and replace it with ellipsis, but the whole data is only displayed in a tooltip that is not even selectable. If that's correct, if there any way you can suggest to make the whole text selectable, I have to implement a similar solution in my project? – Dhruv Singhal Jan 11 '19 at 08:37

score 31 · Answer 2 · edited Nov 21 '13 at 16:11

Configuration Options:

$(document).ready(function () {

  $("#companiesTable").dataTable({
    "sPaginationType": "full_numbers",
    "bJQueryUI": true,
    "bAutoWidth": false, // Disable the auto width calculation 
    "aoColumns": [
      { "sWidth": "30%" }, // 1st column width 
      { "sWidth": "30%" }, // 2nd column width 
      { "sWidth": "40%" } // 3rd column width and so on 
    ]
  });
});

Specify the css for the table:

table.display {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;         // add this 
  word-wrap:break-word;        // add this 
}

HTML:

<table id="companiesTable" class="display"> 
  <thead>
    <tr>
      <th>Company name</th>
      <th>Address</th>
      <th>Town</th>
    </tr>
  </thead>
  <tbody>

    <% for(Company c: DataRepository.GetCompanies()){ %>
      <tr>  
        <td><%=c.getName()%></td>
        <td><%=c.getAddress()%></td>
        <td><%=c.getTown()%></td>
      </tr>
    <% } %>

  </tbody>
</table>

It works for me!

Exactly what I needed: the config options. – ChrisCantrell May 28 '13 at 18:26 — ChrisCantrell, May 28 '13 at 18:26
how can i assign width only in 3rd column ? – Erum Mar 11 '14 at 05:29 — Erum, Mar 11 '14 at 05:29
Works great for legacy version of datatables. – Mohd Abdul Mujib Oct 31 '18 at 13:33 — Mohd Abdul Mujib, Oct 31 '18 at 13:33

score 16 · Accepted Answer · answered Apr 08 '11 at 05:33

16

Try setting the width on the table itself:

<table id="ratesandcharges1" class="grid" style="width: 650px;">

You'll have to adjust the 650 by a couple pixels to account for whatever padding, margins, and borders you have.

You'll probably still have some issues though. I don't see enough horizontal space for all those columns without mangling the headers, reducing the font sizes, or some other bit of ugliness.

answered Apr 08 '11 at 05:33

mu is too short

426,620
70
833
800

yeah I tried that. Still the same result in the browser. Is it possible to set the width to 650px and make the datatable scrollable from left to right to see the content on the far right. Thks for the reply. – Haxed Apr 08 '11 at 05:37
1

You could put `overflow-x: auto` on `#ratesandcharges1Div`, that would put a horizontal scrollbar on the surrounding `
`.
– mu is too short Apr 08 '11 at 05:46
I'm having this same problem. `overflow-x: auto` did as it was supposed to, but changing the width of the table had no effect. – 2rs2ts Nov 27 '13 at 19:26

score 3 · Answer 4 · answered Jul 15 '14 at 14:21

The best solution I found this to work for me guys after trying all the other solutions.... Basically i set the sScrollX to 200% then set the individual column widths to the required % that I wanted. The more columns that you have and the more space that you require then you need to raise the sScrollX %... The null means that I want those columns to retain the datatables auto width they have set in their code. enter image description here

            $('#datatables').dataTable
            ({  
                "sScrollX": "200%", //This is what made my columns increase in size.
                "bScrollCollapse": true,
                "sScrollY": "320px",

                "bAutoWidth": false,
                "aoColumns": [
                    { "sWidth": "10%" }, // 1st column width 
                    { "sWidth": "null" }, // 2nd column width 
                    { "sWidth": "null" }, // 3rd column width
                    { "sWidth": "null" }, // 4th column width 
                    { "sWidth": "40%" }, // 5th column width 
                    { "sWidth": "null" }, // 6th column width
                    { "sWidth": "null" }, // 7th column width 
                    { "sWidth": "10%" }, // 8th column width 
                    { "sWidth": "10%" }, // 9th column width
                    { "sWidth": "40%" }, // 10th column width
                    { "sWidth": "null" } // 11th column width
                    ],
                "bPaginate": true,              
                "sDom": '<"H"TCfr>t<"F"ip>',
                "oTableTools": 
                {
                    "aButtons": [ "copy", "csv", "print", "xls", "pdf" ],
                    "sSwfPath": "copy_cvs_xls_pdf.swf"
                },
                "sPaginationType":"full_numbers",
                "aaSorting":[[0, "desc"]],
                "bJQueryUI":true    

            });

score 3 · Answer 5 · answered Jan 25 '16 at 10:58

3

Answer from official website

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

$('#example').dataTable({
    "columnDefs": [
        {
            "width": "20%",
            "targets": 0
        }
    ]
});

answered Jan 25 '16 at 10:58

Kevin Khew

471
5
11

score 2 · Answer 6 · edited Jun 30 '16 at 13:13

2

In java script calculate width using following code

var scrollX = $(window).width()*58/100;
var oTable = $('#reqAllRequestsTable').dataTable({
    "sScrollX": scrollX
    } );

edited Jun 30 '16 at 13:13

Leo the lion

3,164
2
22
40

answered Oct 03 '11 at 10:15

Raje

3,285
15
50
70

score 1 · Answer 7 · answered Feb 27 '19 at 13:30

by using css we can easily add width to the column.

here im adding first column width to 300px on header (thead)

::ng-deep  table thead tr:last-child th:nth-child(1) {
    width: 300px!important;
}

now add same width to tbody first column by,

  <table datatable class="display table ">
            <thead>
            <tr>
                <th class="text-left" style="width: 300px!important;">name</th>
            </tr>
            </thead>
            <tbody>
           
            <tr>
                <td class="text-left" style="width: 300px!important;">jhon mathew</td>
                
            </tr>
            </tbody>
        </table>

by this way you can easily change width by changing the order of nth child. if you want 3 column then ,add nth-child(3)

score 1 · Answer 8 · edited Jul 23 '22 at 15:12

1

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

edited Jul 23 '22 at 15:12

Tyler2P

2,324
26
22
31

answered Jul 23 '22 at 07:46

Mohamed jafir ashraf

21
4

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jul 23 '22 at 15:12
1

@Tyler2P's point is always important, but it's _especially_ so here given that there are **seven** existing answers, including one with **thirty five** upvotes from the community. How does your approach improve upon the existing suggestions? – Jeremy Caney Jul 25 '22 at 00:04

score 1 · Answer 9 · answered Sep 08 '22 at 17:19

1

I was facing the similar issue. I fixed it with table-responsive. Wrap your table in <div> and add table-responsive as a class attribute. For example, like this.

<div class="table-responsive">
   <table>
    ....
   </table>
</div>

answered Sep 08 '22 at 17:19

Hardik Patil

515
1
4
16

How to set column widths to a jQuery datatable?

9 Answers9

Linked