表格單元格內容可滾動不能在IE上工作11

我在表格單元格內有一個div。它們的內容會動態變化。我想讓div在溢出的情況下提供垂直滾動條（不要擴大包含單元格的高度！）。我目前的實施適用於Chrome和Safari，但不適用於IE和Firefox！下面是一個示例代碼表示我的問題：http://jsfiddle.net/vuSAz/5/（打開它在IE和Chrome瀏覽器看到的差異）表格單元格內容可滾動不能在IE上工作11

我正在尋找解決方案的CSS（不使用JS來調整）。我不想爲單元格設置固定高度。即使容器高度發生變化，我也希望表格適合容器格。

HTML：

<div class="container"> 
<div class="table"> 
    <div class="table-row"> 
     <div class="cell"> 
      <div class="cellHeader">Header 1</div> 
      <div class="cellContent"></div>    
     </div> 
     <div class="cell"> 
      <div class="cellHeader">Header 2</div> 
      <div class="cellContent"></div>    
     </div>   
    </div> 
    <div class="table-row"> 
     <div class="cell"> 
      <div class="cellHeader">Header 1</div> 
      <div class="cellContent"></div>    
     </div> 
     <div class="cell"> 
      <div class="cellHeader">Header 2</div> 
      <div class="cellContent"> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div> 
       <div>sample content</div>  
      </div>    
     </div>  
    </div> 
    <div class="table-row"> 
     <div class="cell"> 
      <div class="cellHeader">Header 1</div> 
      <div class="cellContent"></div>    
     </div> 
     <div class="cell"> 
      <div class="cellHeader">Header 2</div> 
      <div class="cellContent"></div>    
     </div>  
    </div>  
</div>  
</div>

CSS：

.container{ 
    height:500px; 
    width:100%; 
} 
.table{ 
    display:table; 
    border-collapse:collapse; 
    height:100%; 
    width:100%; 
} 
.table-row{ 
    display:table-row; 
} 
.cell{ 
    display:table-cell; 
    border: 1px solid black; 
    padding:5px; 
    height:20%; 
    width:50%; 
} 
.cellHeader{ 
    height:20px; 
} 
.cellContent{ 
    overflow-x:hidden; 
    overflow-y:auto; 
    height:90%; 
}

來源

2014-03-06 aliry

您可以將'.cellContent'設爲'max-height' – MLeFevre

我不'不想爲單元格設置固定的高度。即使容器高度發生了變化，我也希望桌子適合容器格，因此，我不知道放置高度或最大高度的確切值。和最大高度：90％的結果在IE上相同的結果 – aliry

我不知道如果這是你在找什麼，但如果你想在單元格滾動

.cellContent{ 
overflow-x:hidden; 
height:5em; 
}

來源

2014-03-06 16:16:14

我不想爲細胞設置固定的高度。即使容器高度發生了變化，我也希望桌子適合容器格，因此，我不知道放置高度或最大高度的確切值。 – aliry

所以你要求在流體細胞高度的div裏面有一個流體表，每個細胞有一個最大高度，如果他們過去有能力滾動細胞？對不起，我只是試圖得到完整的圖片。 –

是的，如果你在chrome和IE上檢查小提琴（http://jsfiddle.net/vuSAz/5/），你會看到不同之處，我希望IE瀏覽器的行爲與滾動單元格內容的鉻相同 – aliry

我不明白你爲什麼會用分部而不是表，但除此之外，我想我可以幫助你。你似乎想要一個增加滾動條而不增加高度的部門。我認爲你的問題是，當滾動條出現時，它會使分區比沒有滾動條時更大。只要應用下面的CSS來我們談論的DIV：

box-sizing:border-box; 
moz-box-sizing:border-box;

這告訴寬度和高度應顯示元素的真實尺寸的瀏覽器。讓我給你一些例子：

<div style="width:400px;padding:100px;border:20px solid #000">content</div>

以上部門有640像素，真正的寬屏幕（2邊框+ 2個+內邊距寬度）;

<div style="width:400px;padding:100px;border:20px solid #000;box-sizing:border-box">content</div>

上面的分區在屏幕上的真實寬度爲400px。瀏覽器計算（2邊框+ 2填充）並從寬度中減去它以決定內容應具有的寬度。

來源

2014-03-06 16:24:32

我沒有邊界問題。我的問題是cellContent div不顯示在IE瀏覽器上的V滾動條，而當它在Chrome上溢出時顯示。它擴展了表格單元高度而不是滾動！ – aliry

瀏覽器使得沒有水平滾動條較長的界線，因爲文本格式化爲寬度：

a b c d e f g

通過添加CSS屬性的文字變成

a 
b 
c 
...

可避免此行爲：

white-space:nowrap;

來源

2014-03-06 18:28:54

表格單元格內容可滾動不能在IE上工作11

回答

相關問題