Scrollable table

Front End Components
#1

Hello all,

I have a chat window in my app. I built it using a responsive table. The problem is that when there are too many chats, the table gets way too long.

How do I make my table a fixed height, and have it scroll when it gets too long?

#2

Try this class
Please adjust it as required.

.tbodyDiv{
max-height: clamp(5em,10vh,250px);
overflow: auto;
}

Code should be something like this

<div class="tbodyDiv">
<table class="table table-bordered table-striped text-center">
<thead class="sticky-top bg-white">
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>

More info about clamp
Clamp()

2 Likes
#3

Thank you!