Html Question posted in
Some basic documentation can be found here.

html fixing the size of the display of a table so scrollbars (vertical and horizontal) are always in view

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 the scroll bars in view. My table’s display width is 10 columns using bootstrap’s mechanisms. Two columns are used for a vertical menu bar.

I can create a scrollbar on the table, but that’s undesirable because the bottom of the table 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 to 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 and another 4 or 5 columns to the right.

Thanks.

Tags:

2

Answers


  1. 0

    Wrap the table in a div with the table-responsive class.

    <div class="table-responsive">
  <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>
    Login or Signup to reply.
  2. 0 
    <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.

    Thank you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search