使用overflow-x：auto時（如此隱藏內容），Internet Explorer不會調整表格單元高度。 Chrome確實如此。我怎樣才能解決這個問題？

Question

鉻：

Internet Explorer中：

好所以上面的照片是應該的樣子。這是在Chrome上。底部的照片是它在IE11上的樣子。正如你所看到的，它隱藏了所有的內容，並且不會爲滾動條垂直調整。有沒有辦法解決這個問題？我的代碼基本上是：

td { 
    white-space: nowrap; 
    overflow-x: auto; 
} 

注意：對不起，我不是超級有經驗的stackoverflow，不知道如何分離圖片。第二張照片開始的地方是Aimee Reedy - Fredericka McGee - 第二次10/17/16。

Answer 1

這樣的事情應該在兩個鍍鉻工作，IE10 +：

td { 
 
    text-align:left; 
 
    color:blue; 
 
    white-space:nowrap; 
 
    max-width:200px; 
 
    overflow-x:auto; 
 
} 
 

 
th{ 
 
    text-align:left; 
 
} 
 

 
@media all and (-ms-high-contrast:none) 
 
{ 
 
    .padding{overflow-y:hidden;} 
 
}

<table> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Description</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Emma Stone</td> 
 
     <td>Hot Woman</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Shia Labeouf</td> 
 
     <td><div class = "padding"> 
 
     Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy 
 
     </div></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

你碰到的問題是，你要使用一個block元素被設計爲一個容器內使用table-cell。就像Kashif在他的回答中提到的那樣，您應該添加一個div容器，然後在該元素上滾動overflow（這是更簡單的方法）。

另一種方法是將td和th元素更改爲使用inline-block和width屬性。這樣做的唯一問題是你最終刪除了表格單元格，這種類型打破了使用表格的目的。

td, th { 
    display: inline-block; 
    text-align:left; 
    color:blue; 
    white-space:nowrap; 
    max-width:200px; 
    overflow-x:auto; 
    border: 1px solid red; 
    border-collapse: collapse; 
    width: 49%; 
} 

這是您的fiddle with the code。對不起，它非常混亂，我沒有時間去解決問題，但你應該能夠明白。希望有所幫助。