Question 294125 in Html Question posted in
Some basic documentation can be found here.

Html – How can I display this overflowing table so that it stays within its parent div?

I’m not sure if I am allowed to post a link to the webpage instead of the code, but I think it will be easier to see the problem in action, and I’m sure you all know how to view the code in the browser’s debugger…

https://redditstatsbot.com/

When you select a short table, everything is fine. But when you select a huge table, the table overflows out of the div and I lose the footer. How can I keep everything stationary and just scroll through the table instead of scrolling down on the web page?

Tags:

2

Answers


  1. 0

    You can limit the table height like this and then apply overflow: scroll

    .table-div {
    max-height: calc(100vh - 300px); 
    overflow: scroll;
}

    For the demo, I’ve used 300px. You can get the height of select-div, search-div, and footer and subtract the value from 100vh.

    Login or Signup to reply.
  2. 0

    I believe you have not stated your problem correctly but I understood your point. The tablet is not going out of the parent div but expanding itself to its content height.

    Bind the height of the table which has div id="output-table" to a fixed height for example height: 55vh; according to your own need. And then give tbody a CSS property overflow: scroll;

    This will fix your problem. You can play around with these CSS properties if you want something else but of the same problem. play with height and overflow properties.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search