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

Question

我正在使用数据表,我的html表位于父div之内.我最初有这个问题,表在父div之外溢出,如下所示:

我在stackoverflow上找到了这个答案来添加这个css:

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

Answer 1

我试图复制你的问题,这可能是由许多事情引起的,但似乎是你使用的方式特定的datatables东西,而不是一般的<table>元素.

请尝试在代码中使用此CSS.这是丑陋的,每次你需要使用!important,但我已经跑到这种行为的唯一方法是当数据表计算错误的方式元素的宽度,例如,一旦你尝试调用自己的方法.adjust(),所以我们需要以编程方式覆盖它我们自己的CSS(这就是为什么!重要).

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

由于html很长,我在https://jsfiddle.net/zsts5r0m/6/上的jsfiddle中添加了代码.检查我是否将它包装在最大宽度的容器上.如果您要删除!important声明,您会发现问题出现了; 在所有浏览器上.这款小提琴适用于IE11和Chrome.

如果这不能在你的桌子上工作,我担心虽然我们很乐意帮助你,但我们不能这样做,除非你分享一个关于你如何做的最小,完整和可验证的例子.

Answer 2

表格标题和单元格是word-break: normal默认的。在很多情况下，这会导致无中断。

尝试指定word-break属性。IE 支持break-all，但不支持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 3

不久前我也尝试设置一些 td 属性，但 IE11 似乎只是忽略它们，直到我也直接在 table 元素上设置属性。
所以你可以尝试这样做：

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

#myTable td {
    text-overflow: ellipsis;
}