Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vertical scrolling bar for a table using html

Tags:

html

css

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.

like image 985
kawtousse Avatar asked May 24 '10 15:05

kawtousse


People also ask

How do I add a scrollbar to a table in HTML?

Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.

How do I create a vertical scroll bar in HTML?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.


1 Answers

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

<div style="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.

like image 80
Robert Greiner Avatar answered Sep 28 '22 07:09

Robert Greiner