How to fix jquery datatables from overflowing outside parent div in Internet Explorer?

jquery datatable overflow and text wrapping issues
datatable horizontal scroll on top
data tables scrollable
datatables responsive
auto scroll in jquery datatable
datatables_scroll
datatables horizontal
stretch datatables

I am using datatables and my html table is sitting inside of a parent div. I originally had this issue where the table was overflowing outside the parent div like this:

I found this answer on stackoverflow to add this css:

#myTable {
    table-layout: fixed;
}

#myTable td {
    text-overflow: ellipsis;
}

that worked beautifully to fix the issue . . in Firefox and Chrome. So for those browsers, I now see this:

but Internet Explorer (I am using IE 11), still unfortunately still shows the overflow issue as in the first picture above. For other browsers, even if I add additional columns, they keep getting squeezed but still fit into the parent div (which is what I want) where IE will just keep growing horizontally

Are there any recommendations for how I can get Internet Explorer to ensure that the table stays inside the parent div and doesn't overflow outside of it?

Here is my heading row html if that helps to show how i am trying to constrain column sizes:

    <table  id="myTable" style="width:100%">
        <thead>
        <tr>
            <th style="width: 22px;">Id</th>
            <th style="max-width: 250px" class="nameColumn">Name</th>
            <th class="descColumn">Description</th>
            <th style="width: 40px;">Status</th>
            <th style="width: 38px;">Start</th>
            <th style="width: 38px;" class="singleLine">End</th>
            <th style="width: 45px;" class="sourceColumn">Source</th>
            <th class="ragColumn">RAG</th>
            <th style="width: 50px;" class="ownerColumn">Owner</th>
            <th class="minorDateColumn singleLine">Prev End</th>
            <th class="minorDateColumn singleLine">Orig End</th>                
            <th style="width: 40px;">Category</th>
            <th style="width: 25px;max-width: 25px">Ref</th>
            <th style="width: 16px;max-width: 16px">Est</th>
            <th class="milestoneCommentsColumn">Comments</th>
            <th style="width: 5px;max-width: 5px">D</th>
        </tr>
        </thead>

and here is my datatables javascript initialization:

    var result = $("#myTable")
        .DataTable({
            "paging": false,
            "ordering": true,
            "stripeClasses": ['evenColor', 'oddColor']
        });
    result.order.neutral().draw();
    dataTable.draw();
    dataTable.columns.adjust().draw();
}
    return result;

I've tried to replicate your issue which could be caused by many things, but seems to be something specific of the way you're using datatables and not something of a generic <table> element.

Please try using this CSS on your code. It's ugly as everytime you need to use !important but the only way I've ran onto this behaviour is when DataTables calculates the width of the elements in a wrong way, for example once you try to call their method .adjust() so we need to programatically overwrite it with our very own CSS (that's why the !important).

#myTable {
  table-layout: fixed;
  width: 100% !important;
}
#myTable td,
#myTable th{
  width: auto !important;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

Since the html is pretty long, I've added the code on a jsfiddle at https://jsfiddle.net/zsts5r0m/6/. Check that I'm wrapping it on a container with a max-width. If you were to remove the !important declarations, you see that the issue arises; on all browsers. This fiddle works perfectly on IE11 and Chrome alike.

If this is not working on your table, I'm afraid that while we'd love to help you, we cannot do it unless you share a Minimal, Complete and Verifiable example of how you're doing it.

Datatable rows extend past table boundary, or are too narrow , How to fix jquery datatables from overflowing outside parent div in Internet Explorer? I can get Internet Explorer to ensure that the table stays inside the parent div and doesn't overflow outside of it? I have some divs inside a parent div. Is there any way I can detect if one of the inside div are dragged outside its parent? This prevents #blue go outside #parent. What I try is let it out but have an alert when this happens: { containment: "#parent", scroll: false } JQUERY UI:

Tables headers and cells are word-break: normal by default. This leads to no-breaking in a lot of instances.

Try specifying the word-break property. IE supports break-all, but not break-word.

#container {
  width: 100px;
  background-color: yellow;
}

#no_overflow th, #no_overflow td {
  word-break: break-all; /* IE supports this */
  word-break: break-word; /* IE doesn't support, and will ignore */
  /* http://caniuse.com/#feat=word-break */
}
<div id="container">
  <table id="overflow">
    <thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
    <tbody><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr></tbody>
  </table>
  <br/>
  <table id="no_overflow">
    <thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
    <tbody><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr></tbody>
  </table>
</div>

datatable is going outside my container, Ruby 2.0.0, Rails 4.0.3, jquery-datatables-rails 2.2.3 (w/DataTables I've tried a myriead of fixes for this. <div class="span12"> <p> <table id="carstable" < meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  .dataTable tbody td { text-overflow: ellipsis; overflow: hidden; } The only solution that's worked for me is to have a div in the td and setting a max-width / width on the div , but I don't want to set a fixed width, since I want it to be figured out from DataTables.net options, using the sWidth option.

A while back i also tried to set some td properties but IE11 just seemed to ignore them until i also set the property on the table element directly. So You could try doing this:

#myTable {
    table-layout: fixed;
    text-overflow: ellipsis;
}

#myTable td {
    text-overflow: ellipsis;
}

Scroll - horizontal and vertical, Could you add width="100%" to your table please? If that doesn't resolve it, please post a link to a page  Indeed, we can actually see that the little blue square is partially hidden by its overflow hidden parent. Now the solution. Now let’s add another parent and move the position:relative one level up (or, in your context, you could maybe simply use an existing upper parent).

This works for me. The DataTable never goes outside of the parent div (box-body in this example).

<div class="box-body">
    <table id="CustomerTable" class="table table-bordered table-striped" style="cursor:pointer;width:100%">
        <thead style="width:100%">
            <tr>
                <th></th>
                <th>Return Id</th>
                <th>Year</th>
                <th>Email</th>
                <th>SSN</th>
                <th>User Name</th>
            </tr>
        </thead>      
    </table>
</div>

Flexible table width, https://code.jquery.com/jquery-3.5.1.js This example uses a little bit of additional CSS beyond what is loaded from the  I’m trying to test whether a jQuery draggable is being dropped outside of a legal droppable. This would normally be solved 90% of the time by reverting the draggable, but I don’t want to do that. Instead, I want to do one thing if the draggable is dropped onto a droppable (working great!), and something else if it is dropped outside of all

This worked for me:

#Table {
  table-layout: fixed;
  width: 100% !important;
}
#Table td{
  width: auto !important;
  text-overflow: ellipsis;
  overflow: hidden;
}
#Table th{
  width: auto !important;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Datatable going out of div, Typically this is done by assigning width:100% in your CSS, but this presents a problem for Javascript since it can be  Until recently, I didn't know IE (both 6 and 7) had an overflow problem. But it does. I found it on my personal blog, and my pet project: jQuery for Designers - it's particular visible because I use a lot of code examples. Here's a detailed account of the problem, and it's fix.

Responsive Data Table Roundup, I have just problem datatable not refresh after modal close. e. I should probably get this out of the way: this won't work if you have to fully support IE9 or below. 15 Feb 2016 jQuery DataTables: Column width issues with Bootstrap tabs I originally had this issue where the table was overflowing outside the parent div like  Chrome: Internet Explorer: Ok so the top photo is how it should look like. That's on Chrome. The bottom photo is how it looks like on IE11. As you can see, it hides all the content and doesn't ad

@summary DataTables * @description Paginate, search and , Scott's other idea focuses on the problem that large data tables can stretch out the width of a parent container beyond  The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you’ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you set the overflow value to hidden, the image will cut off at 200px.

Datatable overflow scroll, DataTable</i> and <i>jQuery.fn. nTable ); /* * All DataTables are wrapped in a div */ oSettings. this.value; // mental IE8 fix :-( for ( var i=0, iLen=n.length ; i< iLen ; i++ ) { if nScrollHead.style.overflow = "hidden"; nScrollHead.style.position   DataTables Table plug-in for jQuery Advanced tables, instantly. DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Comments
  • Is your IE11 running in IE11 mode? Look in the Developer Tools (F12), "Emulation" tab.
  • Could you provide any test code like Jsfiddle ? It will be more easiest to give you an answer.
  • I believe I know the answer to this question (as I've faced a similar problem before). But I can't know for sure unless you post all the relevant code... 8 years on Stack Overflow, 16K rep, 225 gold badges.. and a question with no MCVE? Wow! That's gotta be a record of some sort ;-)
  • provide code in jsfiddle
  • I think this post will get you the answer. - stackoverflow.com/questions/8058109/…
  • if you are using responsive datatables, this solution doesn't work
  • this seems to have the text expand beyond the background
  • @leora The first table is without my "fix". The second table is with. On my browser (Chrome 52 & IE11), the second table does not expand beyond the background.
  • Is the solution the class=box-body or thead style="width:100%" , all cannot work for me