CODEWITHSUNDEEP
htmlcss
kawtousse
kawtousse

Reputation: 4141

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.

Upvotes: 15

Views: 50659

Answers (3)

Seven
Seven

Reputation: 1

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>

Upvotes: 0

Robert Greiner
Robert Greiner

Reputation: 29732

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.

Upvotes: 35

Tejs
Tejs

Reputation: 41256

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.

Upvotes: 7

Related Questions