data table grows out of container DIV - php

Question

I am using jQuery datatable
<div id="wrapperDiv">
<table id="dataTable"> <!-- data --> </table>
<div/>
wrapper's width is 960 px and table goes to 1080 px (it has broader data)
I tried
- setting width: 100% in table tag inline CSS
- setting overflow-x auto; in table tag
And promising looking solutions from
jQuery DataTables: control table width
How to set column widths to a jQuery datatable?
DataTables width problem
Jquery DataTables - Table width is shorter than dataTable_wrapper width
None of them worked for me, As a workaround I increased the width of wrapper DIV to fit the data table.
Any help?

Answer 1

I've had this same problem off and on for months, none of the suggested solutions fixed my problem. Today I decided to brute-force it and it worked. It's not the most elegant solution, nor would I say it's the "right" way to do it, but it works and is pretty minimal in its impact.
$(document).scroll(function() {
var greatestWidth = 0;
$('.dataTable').each(function() {
if (greatestWidth < $(this).width()) {
greatestWidth = $(this).width();
}
});
$('#yourcontainer').width(greatestWidth);
});
Basically I just try to find the largest table (would work for height as well) whenever the user scrolls and then set the container to be that width. The reason I had to do it this way is that I'm using ajax and some APIs to fill in data and settings so the table resizes itself a few times before it is complete. None of the DataTables complete functions work due to some resizing and reformatting that take place after-the-fact, and $(document).ready() doesn't work because the table is changed after the document loads.
It's ugly but it will do the trick.

Answer 2

You can modify the style
#media (min-width: 500px) {
.table-responsive {
overflow-x: hidden !important;
}
}

Answer 3

The below worked for me:
Define a new class, i called mine "wrappable". Adding this class to datatable column class makes it wrap text in cell so it does not overflow to other cells on the right
table.dataTable tbody td.wrappable { white-space:normal; }
Apply class to column in your dataTable
var columns = [ { data: null, title: " Request Details ", className: "all wrappable", width: '200px', sortable: true, autoWidth: false, render: function (data, type, row) { var year = 'Fiscal Year: ' + naIfNullOrEmpty(data.FISCAL_YEAR) + ''; var cycle = 'Cycle: ' + naIfNullOrEmpty(data.CdSnfCycle.NAME) + ''; var notes = '
Notes: ' + naIfNullOrEmpty(data.NOTES) + ' '; return year + cycle + notes; } }, ]
Hope this helps somebody