CODEWITHSUNDEEP
cssreactjs
jka
jka

Reputation: 457

How to force a React component containing a growing HTML table to stay within the intended maximum dimensions?

How to force a React component containing a growing HTML table to stay within the intended maximum dimensions?

I have a React app in which there is a component called Scoreboard. That component contains an HTML table to which new rows are rendered (as new high scores are reached). I don't want the Scoreboard component to grow out of its bounds though, therefore I've defined a max-height for it:

.Scoreboard {
    max-height: 60vh;
    margin-bottom: 5vh;
    max-width: 50vh;
    display: table;
    margin: 0 auto;
    margin-bottom: 3vh;
    overflow: hidden;
}

But that doesn't work the way I intended. Scoreboard keeps expanding limitlessly as new rows are added to the table. What would I need to do to force the component to stay within the intended maximum dimensions? The overflow shall stay hidden.

Now that I think of it, it would probably be wise to programmatically ignore the excess data and not even try to add them to the table once max count is reached. Still, it would be nice to learn some CSS to solve this kind of issue.

Upvotes: 0

Views: 345

Answers (1)

bonnopc
bonnopc

Reputation: 850

At first make a container div of this table. Such as,

<div className="container">
    <Scoreboard {...props} />
</div>

Then add a max-height for that container in CSS.

.container {
    max-height: 60vh;
    overflow-y: auto; // this is important for scrolling to the bottom of the table 
}

I hope in this way you can show a dynamic table in a limited height.

Upvotes: 1

Related Questions