Vertical Scrolling Bar For A Table Using Html

I want to fixe a height for my html table in the web page and if it pass the height automatically a vertical scrolling bar is shown. please help.

Solution 1:

It's not the table that scrolls, it is the div behind it.

<divstyle="height:200px; overflow-y: scroll;"><table>
   ....
  </table></div>

use overflow-y if you only want a vertical scroll bar and overflow if you want both a vertical and horizontal.

Note: setting an overflow attribute to scroll will always display the scrollbars. If you want the horizontal/vertical scrollbars to only show up when needed, use auto.

Solution 2:

You'd want to place the table inside of a div like so:

<div style="height: 400px; overflow: auto;">
    <!-- Html Elements --!>
</div>

Anything inside that div, when it goes over 400px in height, will overflow and a scrollbar will be shown.

Solution 3:

Say you have a table element...

You'd have to wrap the table element in a container. A div with the class name table-container would suffice. You would then go ahead to give the container a fixed height and make the table element's width to be 100%

.table-container {
  height: 500px;
  width: 800px;
  overflow: auto;
 }
 
 .table-containertable {
  height: 100%;
  width: 100%;
 }

<divclass="table-container"><table>A table</table></div>