Menu
Does anyone know a vanilla way of making the body of a table scrollable using only html and css?
The obvious solution
tbody { height: 200px; overflow-y: scroll; } does not work.
Wouldnt this be the obvious use of tables?
am I doing something wrong?
461
Fill the table with data using tr , th , and td tags. In CSS, select the container class and set its height property to 70px and its overflow-y property to scroll . Ensure the table contents have a height of more than 70px . Next, select the table using the class selector and the table's th and td elements.
in the first div, put a table with only the header (header table tabhead ) in the 2nd div, put a table with header and data (data table / full table tabfull ) use JavaScript, use setTimeout(() => {/*... */}) to execute code after render / after filling the table with results from fetch.
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 .
Very easy, just wrap the table in a div that has overflow-y:scroll; and overflow-x:scroll properties, and make the div have a width and length smaller than the table. IT WILL WORK!!!
You need to declare a height first, else your table will expand to the according with of it's content.
table{ overflow-y:scroll; height:100px; display:block; } EDIT: after clarifying your problem i edited the fiddle: check out this Example or that way. It's rather hacky and not quaranteed to work crossbrowser but might work for your case.
135
You can't do that with a table. Wrap the table with a div a give it something like:
div.wrapper { overflow:hidden; overflow-y: scroll; height: 100px; // change this to desired height } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
