开发者

vertical scrolling bar for a table using html

开发者 https://www.devze.com 2023-01-01 01:31 出处:网络
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 sh开发者_C百科own.

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 sh开发者_C百科own.

please help.


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.


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.


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>

0

精彩评论

暂无评论...
验证码 换一张
取 消