如何制作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定义的表格单元格滚动条？

回答

相关问题