使用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。对不起，它非常混乱，我没有时间去解决问题，但你应该能够明白。希望有所帮助。