Two scrollbars on a page

Question

I have a problem wtih two scroolbars on webpage which does same length, backlog table is longer than this on right but when a set custom css class .table-responsive {
height: 100%;
overflow-y: scroll;
}. I am using bootstrap 5.3. I want have vertical scrollbar for backlog table and the short vertical scrollbar for table employee. Backlog table is ViewComponent. I am using Asp-Net.Core MVC.

This part of web page on right backlog table like partial wie and everything other is normal view

Tuhin Paul · Answer

Add this in your css class: .table-responsive { height: 100%; overflow-y: auto; } .table-responsive-backlog { height: calc(100% - 16px); overflow-y: scroll; } add the class table-responsive-backlog to the container of your backlog table and add the class table-responsive to the container of your employee table. This will set the height of the backlog table container to be 100% of the parent container minus 16px for the height of the employee table container's scrollbar and set the overflow-y property to scroll.

Deepak Rawat · Answer

vertical scrollbar for only the backlog table and a short vertical scrollbar for the employee table you can use the CSS overflow-y: auto property for the employee table and overflow-y: scroll property for the backlog table. Here's an example of how you can achieve this: .table-responsive { height: 100%; overflow-x: hidden; } .employee-table { overflow-y: auto; max-height: 200px; /* adjust this value as per your needs */ } .backlog-table { height: 100%; overflow-y: scroll; } n this example we have added a CSS class .employee-table to the employee table and set its overflow-y property to auto . We have also added a max-height property to limit the height of the employee table and show a short vertical scrollbar if needed. For the backlog table we have added a CSS class .backlog-table and set its overflow-y property to scroll . This will add a long vertical scrollbar to the backlog table. Make sure to adjust the max-height value of the employee table based on your content and screen size. You can also adjust other CSS properties as per your needs.