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

Answer 1

Answer from official website

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

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

Answer 2

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.

Answer 3

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 4

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!

Answer 5

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)

Answer 6

In java script calculate width using following code

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