data table grows out of container DIV

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?

What behavior are you expecting? For the div provide a scroll bar? Or the datatable? Have you tried "sScrollX":"100%" in the .dataTable() call? You could also try "sScrollX":"1080". Also look at sScrollXInner. It just depends on what you are expecting. — Bumptious Q Bangwhistle, May 14 '13 at 11:05
Post a jsfiddle, i typically set a container div to px width, then the generated datatables wrapper to 100% — Jay Rizzi, May 15 '13 at 17:13

score 0 · Answer 1 · answered Sep 01 '15 at 15:14

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.

score 0 · Answer 2 · edited Jul 13 '17 at 20:01

0

You can modify the style

@media (min-width: 500px) {
    .table-responsive {
        overflow-x: hidden !important;
    }
}

edited Jul 13 '17 at 20:01

budi

6,351
10
55
80

answered Jul 13 '17 at 19:33

TheMrP

39
6

score 0 · Answer 3 · answered Mar 28 '18 at 14:14

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

data table grows out of container DIV

3 Answers3