Scroll more data on click

Question

I have an appointment table in html as follows:

 <table> <thead style="text-align:center; color:#000;"> <th style="text-align:center;">Mon</th> <th style="text-align:center;">Tue</th> <th style="text-align:center;">Wed</th> <th style="text-align:center;">Thu</th> <th style="text-align:center;">Fri</th> <th style="text-align:center;">Sat</th> </thead> <tbody style="background:#ccc"> <tr> <td style="padding:10px"> <li style="background:#eee; color:#000; border:solid 1px #ffb600; width:60px; padding:1px; list-style:none;">8.30</li> <li style="background:#eee; color:#000; border:solid 1px #ffb600; width:60px; padding:1px; list-style:none;">8.30</li> <li style="background:#eee; color:#000; border:solid 1px #ffb600; width:60px; padding:1px; list-style:none;">8.30</li> <li style="background:#eee; color:#000; border:solid 1px #ffb600; width:60px; padding:1px; list-style:none;">8.30</li> <li style="background:#eee; color:#000; border:solid 1px #ffb600; width:60px; padding:1px; list-style:none;">8.30</li> <li style="background:#eee; color:#000; border:solid 1px #ffb600; width:60px; padding:1px; list-style:none;">8.30</li> <li style="background:#eee; color:#000; border:solid 1px #ffb600; width:60px; padding:1px; list-style:none;">8.30</li> </td> <tr> </tbody> </table> 

I have tried to add scroll but in an indirect way, on bottom of last <li> tag a show more button should be there. so that when i click on, td cell data should scroll up and rest of the data should show

Please guide if someone worked on this before?

Answer 1

There is another option called lazy loading, this feature is support in chrome browser, all we have to do is add a attribute to the html element .

<table loading="lazy"></table>

to read more check this link lazy load