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

Question

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;

Answer 1

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.

Answer 2

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;
}

Answer 3

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>

Answer 4

Just Follow the two steps

1. Put you table code in div
2. add table-responsive (Bootstrap class) on that div.

E.g <div class="table-responsive> your table