如何解決jQuery數據表中溢出Internet Explorer的父級div外？

Question

我正在使用數據表，我的html表坐在父div的內部。我本來有這個問題，即該表是溢滿父DIV外面是這樣的：

我發現this answer on stackoverflow添加這個CSS：

#myTable { 
    table-layout: fixed; 
} 

#myTable td { 
    text-overflow: ellipsis; 
} 

奏效精美來解決該問題。 。在Firefox和Chrome中。因此，對於這些瀏覽器，我現在看到這一點：

不過IE（我使用的IE 11），仍不幸仍顯示溢出問題在上面的第一張照片。對於其他瀏覽器，即使我添加了額外的列，它們仍然受到擠壓，但仍然適合父div（這是我想要的），其中IE將只是保持水平增長

是否有任何關於如何獲得Internet的建議資源管理器，以確保表保持在父分區內，並不溢出它外面？

這裏是我的標題行的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> 

這裏是我的DataTable的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

前陣子我也嘗試設置一些TD屬性，但IE11似乎忽略它們，直到我也直接在表元素上設置屬性。
所以你可以嘗試這樣做：

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

#myTable td { 
    text-overflow: ellipsis; 
} 

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

我試圖複製您的問題可能由許多原因引起，但似乎是具體的你使用datatables，這也不是一個通用的<table>方式的東西元件。

請嘗試在您的代碼上使用此CSS。這是醜陋因爲每次你需要使用!important但我碰到這種行爲的唯一方法是當DataTables以錯誤的方式計算元素的寬度，例如一旦你嘗試調用他們的方法.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的代碼。檢查我是否將它包裝在最大寬度的容器上。如果你要刪除！重要的聲明，你會發現問題的出現;在所有瀏覽器上。這款小提琴完美適用於IE11和Chrome。

如果這不適用於您的餐桌，恐怕我們很樂意爲您提供幫助，除非您分享Minimal, Complete and Verifiable例子，否則我們無法做到。

Answer 4

這適用於我。 DataTable永遠不會超出父div（本例中爲box-body）。

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