[edits added below per the request to see code. Edits also added to the original post to clarify the ask - marked in bold]
My application features a broad table with the potential for many rows, generated by django-tables2 using the bootstrap5-responsive template.
The objective is to incorporate scrollbars into the table while managing the height and width of the table so that it occupies a significant portion of the screen while keeping both vertical and horizontal scroll bars accessible. The aim is to enable users to scroll both horizontally and vertically without losing sight of their desired row or column.
The table has a display width equivalent to 10 columns using bootstrap's system. Two columns are allocated for a vertical menu bar (as depicted in the image as the truncated menu on the left side).
I managed to implement a scrollbar on the table, but the positioning of the horizontal scroll-bar proved cumbersome, ending up at the bottom of the table, which can be quite distant. I am still working on restricting the vertical size, which I believe requires further exploration.
While experimenting with the window's scroll bars, I encountered issues when attempting horizontal scrolling as it pushed the page's header information out of view, disrupting user experience (especially considering plans for expanding the header functionality like saving the table to a file).
What I envision is having the table within a designated region where the scrollbars remain consistently visible. The space allocated for the table should adapt according to the available room.
For clearer guidance, refer to the image below depicting the desired appearance. In this scenario, there are approximately another 100 rows concealed beneath the displayed content, along with around 4 or 5 additional columns to the right.
Thank you. https://i.sstatic.net/imkYn.jpg
[edits to revise the problem statement [edits to show code] here's the html - its a django template, incorporating Ben's and Geny Dev's suggestions within the div class="table-responsive" near the end of the code snippet.
{% load render_table from django_tables2 %}
{% block content %}
<div class="table-responsive" style="height: 200px;">
{% render_table student_change_table %}
</div>
{% endblock content %}
The stylesheet utilized is based on bootstrap5.
Upon initial rendering, the outcome shows a perfect vertical scrollbar: https://i.sstatic.net/GyGhT.png However, the horizontal scrollbar remains hidden at the bottom of the table (100 rows down) https://i.sstatic.net/BE78M.png The table adheres to the standard django-tables2 template for bootstrap5-responsive:
{% extends 'django_tables2/bootstrap5.html' %}
{% block table-wrapper %}
<div class="table-container table-responsive">
{% block table %}
{{ block.super }}
{% endblock table %}
{% block pagination %}
{{ block.super }}
{% endblock pagination %}
</div>
{% endblock table-wrapper %}
The tables.py script involves no specialized alterations:
from django_tables2 import Table
class ChangeTable(Table):
change_date = Column(
empty_values=(),
)
# about a dozen of these...
# the table receives data through render_* methods, such as:
@staticmethod
def render_change_date(record):
return record.change_date