title: How to fix jquery datatables from overflowing outside parent div in Internet Explorer?
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/S03TK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/S03TK.png" alt="enter image description here"></a></p>
  
  <p>I found <a href="https://stackoverflow.com/questions/19571017/how-do-i-fix-long-column-value-issue-which-breaks-table-outside-of-container-us">this answer on stackoverflow</a> to add this css:</p>
  
  <pre><code>#myTable {
      table-layout: fixed;
  }
  
  #myTable td {
      text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>that worked beautifully to fix the issue . . in Firefox and Chrome.  So for those browsers, I now see this:</p>
  
  <p><a href="https://i.stack.imgur.com/Dz4St.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Dz4St.png" alt="enter image description here"></a></p>
  
  <p>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</p>
  
  <p>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?</p>
  
  <p>Here is my heading row html if that helps to show how i am trying to constrain column sizes:</p>
  
  <pre><code>    &lt;table  id="myTable" style="width:100%"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="width: 22px;"&gt;Id&lt;/th&gt;
              &lt;th style="max-width: 250px" class="nameColumn"&gt;Name&lt;/th&gt;
              &lt;th class="descColumn"&gt;Description&lt;/th&gt;
              &lt;th style="width: 40px;"&gt;Status&lt;/th&gt;
              &lt;th style="width: 38px;"&gt;Start&lt;/th&gt;
              &lt;th style="width: 38px;" class="singleLine"&gt;End&lt;/th&gt;
              &lt;th style="width: 45px;" class="sourceColumn"&gt;Source&lt;/th&gt;
              &lt;th class="ragColumn"&gt;RAG&lt;/th&gt;
              &lt;th style="width: 50px;" class="ownerColumn"&gt;Owner&lt;/th&gt;
              &lt;th class="minorDateColumn singleLine"&gt;Prev End&lt;/th&gt;
              &lt;th class="minorDateColumn singleLine"&gt;Orig End&lt;/th&gt;                
              &lt;th style="width: 40px;"&gt;Category&lt;/th&gt;
              &lt;th style="width: 25px;max-width: 25px"&gt;Ref&lt;/th&gt;
              &lt;th style="width: 16px;max-width: 16px"&gt;Est&lt;/th&gt;
              &lt;th class="milestoneCommentsColumn"&gt;Comments&lt;/th&gt;
              &lt;th style="width: 5px;max-width: 5px"&gt;D&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
  </code></pre>
  
  <p>and here is my datatables javascript initialization:</p>
  
  <pre><code>    var result = $("#myTable")
          .DataTable({
              "paging": false,
              "ordering": true,
              "stripeClasses": ['evenColor', 'oddColor']
          });
      result.order.neutral().draw();
      dataTable.draw();
      dataTable.columns.adjust().draw();
  }
      return result;
  </code></pre>