How to specify table's height such that a vertical scroll bar appears?

Question

I have a table with many rows on my page. I would like to set table\'s height, say for 500px, such that if the height of the table is bigger than that, a vertical scroll bar

Answer 1

Try using the overflow CSS property. There are also separate properties to define the behaviour of just horizontal overflow (overflow-x) and vertical overflow (overflow-y).

Since you only want the vertical scroll, try this:

table {
  height: 500px;
  overflow-y: scroll;
}

---

EDIT:

Apparently

elements don't respect the overflow property. This appears to be because elements are not rendered as display: block by default (they actually have their own display type). You can force the overflow property to work by setting the element to be a block type:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Note that this will cause the element to have 100% width, so if you don't want it to take up the entire horizontal width of the page, you need to specify an explicit width for the element as well.

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...

验证码

 看不清?

提交回复

热议问题