vertical scrolling bar for a table using html

Question

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.

You should probably clarify whether you want the header and/or footer cells of the table to remain fixed whilst the rest is scrollable, or not. Having them fixed is the more popular request, but significantly trickier. — reisio, May 24 '10 at 15:33

score 33 · Answer 1 · edited Dec 17 '13 at 13:58

33

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.

edited Dec 17 '13 at 13:58

Community

1
1

answered May 24 '10 at 15:15

Robert Greiner

29,049
9
65
85

What's the div for? Why don't you merely scroll the table? – ANeves May 24 '10 at 15:42
but what about the header? even this will scroll – Nikhil Kulkarni Apr 14 '20 at 07:54

score 7 · Answer 2 · answered May 24 '10 at 15:15

7

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.

answered May 24 '10 at 15:15

Tejs

40,736
10
68
86

What's the div for? Why don't you merely scroll the table? – ANeves May 24 '10 at 15:38

score 0 · Answer 3 · answered Sep 08 '21 at 01:29

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-container table {
  height: 100%;
  width: 100%;
 }

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

vertical scrolling bar for a table using html

3 Answers3

Linked