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   Here is my code   lt script type  quot text javascript quot  gt       var ratesandcharges1         document  ready function                 Init the table              quot  ratesandcharges1 quot   dataTable                quot bRetrieve quot   false               quot bFilter quot   false               quot bSortClasses quot   false               quot bLengthChange quot   false               quot bPaginate quot   false               quot bInfo quot   false               quot bJQueryUI quot   true               quot bAutoWidth quot   false               quot aaSorting quot     2   quot desc quot                  quot aoColumns quot                   sWidth   9                    sWidth   9                    sWidth   9                    sWidth   9                    sWidth   9                    sWidth   9                    sWidth   9                    sWidth   9                    sWidth   9                    sWidth   9                    sWidth   10                            ratesandcharges1 fnDraw              lt  script gt   lt div id  quot ratesandcharges1Div quot  style  quot width  650px  quot  gt      lt table id  quot ratesandcharges1 quot  class  quot grid quot   gt       lt thead gt           lt  --Header row-- gt           lt tr gt               lt th gt Charge Code lt  th gt               lt th gt Rates lt  th gt               lt th gt Quantity lt  th gt               lt th gt Total Charge lt  th gt               lt th gt VAT   lt  th gt               lt th gt Calc  Type lt  th gt               lt th gt Paid By lt  th gt               lt th gt From lt  th gt               lt th gt To lt  th gt               lt th gt VAT lt  th gt               lt th gt MVGB lt  th gt            lt  tr gt       lt  thead gt       lt  --Data row-- gt       lt tbody gt           lt tr gt               lt td gt Day Tag lt  td gt               lt td gt 55 00 lt  td gt               lt td gt 3 00 lt  td gt               lt td gt 165 00 lt  td gt               lt td gt 20 00 lt  td gt               lt td gt Rental Time lt  td gt               lt td gt Bill-to Agent lt  td gt               lt td gt 5 11 2010 lt  td gt               lt td gt 08 11 2010 lt  td gt               lt td gt 33 00 lt  td gt               lt td gt 1 98 lt  td gt           lt  tr gt           lt tr gt               lt td gt PAI lt  td gt               lt td gt 7 50 lt  td gt               lt td gt 3 00 lt  td gt               lt td gt 22 50 lt  td gt               lt td gt 20 00 lt  td gt               lt td gt Rental Time lt  td gt               lt td gt Driver Cust  lt  td gt               lt td gt 5 11 2010 lt  td gt               lt td gt 08 11 2010 lt  td gt               lt td gt 4 50 lt  td gt               lt td gt 0 00 lt  td gt           lt  tr gt           lt tr gt               lt td gt BCDW lt  td gt               lt td gt 15 00 lt  td gt               lt td gt 3 00 lt  td gt               lt td gt 45 00 lt  td gt               lt td gt 20 00 lt  td gt               lt td gt Rental Time lt  td gt               lt td gt Driver Cust  lt  td gt               lt td gt 5 11 2010 lt  td gt               lt td gt 08 11 2010 lt  td gt               lt td gt 9 00 lt  td gt               lt td gt 0 54 lt  td gt           lt  tr gt           lt tr gt               lt td gt BTP lt  td gt               lt td gt 7 15 lt  td gt               lt td gt 3 00 lt  td gt               lt td gt 21 45 lt  td gt               lt td gt 20 00 lt  td gt               lt td gt Rental Time lt  td gt               lt td gt Driver Cust  lt  td gt               lt td gt 5 11 2010 lt  td gt               lt td gt 08 11 2010 lt  td gt               lt td gt 4 29 lt  td gt               lt td gt 0 26 lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt   lt  div gt       Any ideas   Thanks

User · Answer

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

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

_x000D_

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

_x000D_

now add same width to tbody first column by,

_x000D_

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

_x000D_

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)

User · Answer

Answer from official website  https   datatables net reference option columns width      example   dataTable        columnDefs                            width    20                 targets   0

User · Answer

In java script calculate width using following code  var scrollX     window  width   58 100  var oTable       reqAllRequestsTable   dataTable        sScrollX   scrollX

User · Answer

Try setting the width on the table itself    lt table id  ratesandcharges1  class  grid  style  width  650px   gt    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

User · Answer

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                    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     lt  H TCfr gt t lt  F ip gt                     oTableTools                                           aButtons      copy    csv    print    xls    pdf                          sSwfPath    copy cvs xls pdf swf                                      sPaginationType   full numbers                    aaSorting    0   desc                      bJQueryUI  true

User · Answer

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    lt table id  companiesTable  class  display  gt      lt thead gt       lt tr gt         lt th gt Company name lt  th gt         lt th gt Address lt  th gt         lt th gt Town lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt        lt   for Company c  DataRepository GetCompanies       gt         lt tr gt             lt td gt  lt   c getName    gt  lt  td gt           lt td gt  lt   c getAddress    gt  lt  td gt           lt td gt  lt   c getTown    gt  lt  td gt         lt  tr gt       lt       gt      lt  tbody gt   lt  table gt    It works for me

User · Answer

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    lt style gt  table       table-layout fixed    td      overflow hidden      text-overflow  ellipsis     lt  style gt

[jquery] How to set column widths to a jQuery datatable?

Examples related to jquery

Examples related to jquery-ui

Examples related to datatables