CODEWITHSUNDEEP
htmlcssbootstrap-5css-tablesdjango-tables2
Mike
Mike

Reputation: 67

How can I fix the size of the display of a table so scrollbars (vertical and horizontal) are always in view?

[edits added below per the request to see code. Edits also added to the original post to clarify the ask - marked in bold]

My app has a wide table that is potentially has many rows. The table is generated by django-tables2 using the bootstrap5-responsive template.

My goal is to add scrollbars to the table and control the table's height and width so the table fills a good bit of the screen yet keeps both the vertical and horizontal scroll bars in view. The idea is to allow users to scroll across a row OR scroll down a column without losing the row or column of interest.

My table's display width is 10 columns using bootstrap's mechanisms. Two columns are used for a vertical menu bar (shown in the picture as the cut-off menu on the left side).

I can create a scrollbar on the table, but that's undesirable because the horizontal scroll-bar ends up at the bottom of the table, which can be very far down. I haven't figured out how to limit the vertical size yet, but that's probably just another google search.

I have tried using the window's scroll bars, but the horizontal scrolling slides the page's heading information off the page and messes up the UX (plus there are plans to expand the header - like save table to a file).

What I'm trying for is have the table present in a region so the scrollbars are always in view. The region dedicated to the table should adapt to space available.

Here's a picture below to show what is wanted in case my description is unclear. In this example, there are another 100 or so rows below what is displayed and there are another 4 or 5 columns to the right.

Thanks.

[edits to revise the problem statement [edits to show code] here's the html - its a django template, which implements Ben's and Geny Dev's advice in the div with the class="table-responsive" toward the bottom.


{% load render_table from django_tables2 %}

{% block content %}

    <div class="table-responsive" style="height: 200px;">
      
        {% render_table student_change_table %}
      
    </div>
 
{% endblock content %}

The css is bootstrap5.

Here's the result upon initial rendering. The vertical scrollbar is perfect: enter image description here but the horizontal scrollbar is buried at the bottom of the table (100 rows down) enter image description here the table renders using 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 has nothing special:

from django_tables2 import Table

class ChangeTable(Table):
    change_date = Column(
        empty_values=(),
    )
   # about a dozen of these...

   # the table is populated using render_*, for example:
   @staticmethod
   def render_change_date(record):
       return record.change_date

Upvotes: 0

Views: 493

Answers (2)

Geny Dev
Geny Dev

Reputation: 9

<code>
    .container-table {
       width: 100px;
       height: 100px;
       overflow: scroll;
    }
    
    <div class="container-table">
        <table>
            <-- table content -->
        </table>
    </div>
</code>

You should change class name and add more style as you like.

Upvotes: 0

Ben
Ben

Reputation: 2557

Wrap the table in a div with the table-responsive class, and set that div's height to whatever fits best.

<div class="table-responsive" style="height: 200px;">
  <table class="table">
    <thead>
      <tr>
        <th>Person</th>
        <th>Section</th>
      </tr>
    </thead>
    <tbody>
      {% for info, row in data.items %}
      <tr>
          <td>{{ row.person }}</td>
          <td>{{ row.section }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions