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:

<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

Answer 1

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> 

Answer 2

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!