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;

Is your IE11 running in IE11 mode? Look in the Developer Tools (F12), "Emulation" tab. — thirtydot
– thirtydot, Commented Jul 28, 2016 at 14:04
Could you provide any test code like Jsfiddle ? It will be more easiest to give you an answer. — Timtim
– Timtim, Commented Aug 10, 2016 at 0:39
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 ;-) — Michael Benjamin
– Michael Benjamin, Commented Aug 10, 2016 at 2:16
I think this post will get you the answer. - stackoverflow.com/questions/8058109/… — vohrahul
– vohrahul, Commented Aug 16, 2016 at 18:01

Juan Ferreras · Accepted Answer · 2016-08-15 17:12:01Z

35

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.

answered Aug 15, 2016 at 17:12

Juan Ferreras

2,8712 gold badges15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dario Rusignuolo Over a year ago

if you are using responsive datatables, this solution doesn't work

Nate · Accepted Answer · 2016-08-12 15:47:49Z

6

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>

answered Aug 12, 2016 at 15:47

Nate

1,2701 gold badge13 silver badges21 bronze badges

2 Comments

leora Over a year ago

this seems to have the text expand beyond the background

Nate Over a year ago

@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.

Groc · Accepted Answer · 2019-04-04 18:20:03Z

3

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

answered Apr 4, 2019 at 18:20

Groc

751 silver badge9 bronze badges

Comments

Zain · Accepted Answer · 2020-11-20 10:25:43Z

2

Just Follow the two steps

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

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

answered Nov 20, 2020 at 10:25

Zain

212 bronze badges

2 Comments

vovchisko Over a year ago

Does OP use bootstrap?

StarShine Over a year ago

Also that example snippet contains a typo.

ListenFirst · Accepted Answer · 2016-08-15 19:10:41Z

1

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>

answered Aug 15, 2016 at 19:10

ListenFirst

1394 bronze badges

1 Comment

robspin Over a year ago

Is the solution the class=box-body or thead style="width:100%" , all cannot work for me

Mike Lambert · Accepted Answer · 2016-08-12 06:33:34Z

0

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

answered Aug 12, 2016 at 6:33

Mike Lambert

528 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

1 Comment

2 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related