HTML表格主体定位和滚动

时间:2011-09-30 00:12:24

标签: html css scroll html-table padding

this Fiddle所示,我在页面上有三个表格。我希望能够滚动“排行榜”和“队列”的主体,只留下标题和表格标题。最好没有绝对定位。

有点相关,我还需要表格(不包括caption在边上有一点填充(但不是在单个单元格之间)。

2 个答案:

答案 0 :(得分:2)

overflow: scroll;添加到您的div并添加height。如果您只想向一个方向滚动,则可以overflow-x进行水平滚动,overflow-y进行垂直滚动。要检测div是否需要可滚动,请使用overflow: auto;

答案 1 :(得分:0)

overflow: auto;添加到要滚动的周围DIV中。您可能希望设置明确的高度,具体取决于您的布局 - 您不必,但如果不这样做则不会滚动。如果您希望它仅延伸到某一点,您可以尝试设置max-height。如果您只希望它垂直滚动,则某些浏览器支持overflow-y: auto,但不是全部。

由于表中有<caption>,因此无法在表格上设置填充或边距。你可以:

  • 从表格中取出标题并将其设为简单标题,如h2,然后在表格中添加边距,或
  • 您可以在左侧表格单元格/列上设置padding-left,在另一侧设置padding-right。不是真正干净,但如果你愿意,可以保留<caption>语义。