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 will appear  I tried to use CSS height attribute on the table  but it doesn t work

User · Answer

This CSS also shows a fixed height HTML table. It sets the height of the HTML tbody to 400 pixels and the HTML tbody scrolls when the it is larger, retaining the HTML thead as a non-scrolling element.

In addition, each th cell in the heading and each td cell the body should be styled for the desired fixed width.

#the-table {
  display: block;
  background: white; /* optional */
}

#the-table thead {
  text-align: left; /* optional */
}

#the-table tbody {
  display: block;
  max-height: 400px;
  overflow-y: scroll;
}

User · Answer

You need to wrap the table inside another element and set the height of that element  Example with inline css    lt div style  height  500px  overflow  auto   gt    lt table gt    lt  table gt   lt  div gt

User · Answer

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  lt table gt  elements don t respect the overflow property  This appears to be because  lt table gt  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  lt table gt  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

User · Answer

to set the height of table  you need to first set css property  quot display  block quot  then you can add  quot width height quot  properties  I find this Mozilla Article a very good resource to learn how to style tables   Link

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

Examples related to css

Examples related to css-tables