如何製作CSS定義的表格單元格滾動條？

我希望能夠設置表格的高度，並強制單元格單獨滾動，如果它們大於表格。如何製作CSS定義的表格單元格滾動條？

考慮下面的代碼：（看到它在行動here）

<div style="display: table; position: absolute; 
    width: 25%; height: 80%; min-height: 80%; max-height: 80%; 
    left: 0%; top: 10%; right: 75%; bottom: 10%; border: solid 1px black;"> 
    <div style="display: table-row;"> 
     <div style="display: table-cell; border: solid 1px blue;"> 
      {Some dynamic text content}<br/> 
      This cell should shrink to fit its contents. 
     </div> 
    </div> 
    <div style="display: table-row;"> 
     <div style="display: table-cell; border: solid 1px red; 
      overflow: scroll;"> 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
     </div> 
    </div> 
</div>

如果（在IE8在我的情況下）打開此代碼，您會發現，第二個單元格表中的配合很好時瀏覽器是最大化的。理論上，當你縮小瀏覽器（強制表格也縮小）時，當表格變得太小而不適合所有內容時，垂直滾動條應該出現在第二個單元格的內部。但實際上，表格只是垂直增長，超出了CSS height屬性設置的界限。

希望我已經解釋了此方案充分...

有誰知道我能得到這個工作？

來源

2010-04-29 Giffyguy

你不能用普通表做到這一點？似乎非常哈克。 – fig 2010-04-29 22:27:06

@ fig-gnuton：實際上，一張普通的桌子也不起作用（更不用說古代了）。我嘗試過的HTML表格從來沒有對設置的高度作出響應，更不用說正確滾動了。這可能與我在一堆由ASP.NET支持的更爲現代的XHTML代碼中間使用它們有關。我從來沒有親眼見過HTML表格在這種情況下很好玩...... – Giffyguy 2010-04-29 22:30:47

Giffyguy，注意到，發佈了一個答案。 – fig 2010-04-29 22:35:21

一個很古老的問題;但當我搜索同一主題時，仍然是谷歌第二。

我找到的簡單解決方案是將「需要將div滾動到另一個div」的內容。不知道爲什麼;但帶有「display：table-cell」的元素不會滾動。但是裏面的元素可以。所以把一個div放在裏面，並將其設置爲滾動！

來源

2015-05-08 07:32:41

要獲得這種行爲你可能只是避免CSS表格模型，並採用浮動，設置寬度/高度創建自己的表式顯示等

來源

2010-04-29 22:37:20 fig

我唯一關心的是這個解決方案是我試圖避免在JavaScript中手動渲染它。我一直在試圖通過JavaScript來設置這些元素的大小几個星期，並且已經決定純粹聲明性的解決方案更可取。這真的不可能嗎？ – Giffyguy 2010-04-29 22:39:55

@Giffyguy，我不是說你必須使用JavaScript。只是建議使用典型的CSS。但也許我沒有得到你想要的。 – fig 2010-04-29 23:11:44

有趣。也許這是我誰沒有得到你的建議。所以你說如果我用所有東西分別使用div，將它們浮在我想要的位置，然後自己設置尺寸，一切都應該工作，對吧？問題在於內容是動態的，從數據庫加載並且大小未知。我只想盡可能多地展示它，但是我認爲這些div的固定大小在短期內至少是可以接受的。 – Giffyguy 2010-04-29 23:15:40

如何製作CSS定義的表格單元格滾動條？

回答

相關問題