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.
1
-
2You 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– reisio2010-05-24 15:33:37 +00:00Commented May 24, 2010 at 15:33
Add a comment
|
3 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.
2 Comments
ANeves
What's the div for? Why don't you merely scroll the table?
Nikhil Kulkarni
but what about the header? <thead> even this will scroll
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.
1 Comment
ANeves
What's the div for? Why don't you merely scroll the table?
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>