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
This question is related to
jquery
jquery-ui
datatables
The answer is
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.
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) {_x000D_
width: 300px!important;_x000D_
}now add same width to tbody first column by,
<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_
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)
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!
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>
In java script calculate width using following code
var scrollX = $(window).width()*58/100;
var oTable = $('#reqAllRequestsTable').dataTable({
"sScrollX": scrollX
} );
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": '<"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
});
Answer from official website
https://datatables.net/reference/option/columns.width
$('#example').dataTable({
"columnDefs": [
{
"width": "20%",
"targets": 0
}
]
});
Source: Stackoverflow.com