如何修复 jquery 数据表在 Internet Explorer 中溢出父 div 之外的问题？

Question

新手上路，请多包涵

我正在使用数据表，而我的 html 表位于父 div 内。我最初遇到了这个问题，表在父 div 之外溢出，如下所示：

 #myTable {
    table-layout: fixed;
}

#myTable td {
    text-overflow: ellipsis;
}

这很好地解决了这个问题。 .在 Firefox 和 Chrome 中。所以对于那些浏览器，我现在看到了：

但是 Internet Explorer（我使用的是 IE 11），不幸的是仍然显示溢出问题，如上图第一张所示。对于其他浏览器，即使我添加了额外的列，它们仍然会被挤压，但仍然适合父 div（这就是我想要的），IE 将继续水平增长

对于如何让 Internet Explorer 确保表保持在父 div 内并且不会溢出到它之外，是否有任何建议？

这是我的标题行 html，如果这有助于显示我如何尝试限制列大小：

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

这是我的数据表 javascript 初始化：

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