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

by

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 <table> elements don’t respect the overflow property. This appears to be because <table> 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 <table> 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 containing element, you need to specify an explicit width for the element as well.

More Related Contents:

  1. Repeat table headers in print mode
  2. IE display: table-cell child ignores height: 100%
  3. How is a CSS “display: table-column” supposed to work?
  4. IE7 and the CSS table-cell property
  5. Vertical align table-cell don’t work with position absolute
  6. Box Shadow on table row not appearing on certain browsers
  7. How do I keep CSS floats in one line?
  8. Using CSS to make table’s outer border color different from cells’ border color
  9. Is there a CSS selector for elements containing certain text?
  10. How do I hide an element when printing a web page?
  11. ::slotted CSS selector for nested children in shadowDOM slot
  12. Aligning grid items across the entire row/column (like flex items can)
  13. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  14. Nesting CSS classes
  15. How can I force browsers to print background images in CSS?
  16. Is embedding background image data into CSS as Base64 good or bad practice?
  17. Specify an SVG as a background image and ALSO style the SVG in CSS?
  18. Can I change the fill color of an svg path with CSS?
  19. how to reset a CSS variable (aka custom properties) and use the fallback one?
  20. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  21. CSS transitions with calc() do not work in IE10+
  22. Make children divs the height of tallest child
  23. On IE CSS font-face works only when navigating through inner links
  24. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  25. “Eliminate render-blocking CSS in above-the-fold content”
  26. prevent children from inheriting transformation css3
  27. how to change bootstrap version 4 button color
  28. CSS change d property of
  29. How to center content and make the background cover the full column when using CSS Grid?
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment