Achieving a dynamic scrollable table that adjusts its height based on its parent container (HTML + Bootstrap)

I am trying to create a table that can be scrolled vertically using the standard overflow: auto property without specifying a set height for the table's container.

While Bootstrap provides a class called table-responsive for handling horizontal scrolling, I am struggling to achieve vertical scrolling without setting a maximum height directly on the table's container.

Below is a snippet of the HTML and Bootstrap code I am currently using:

    <div class="card card-bordered m-3 w-50" style="height: 400px">
      <div class="card-body px-3 pt-2 pb-0">
        <div class="table-responsive" style="overflow: auto">
          <table class="table table-bordered table-sm mb-0">
            <thead>

If you would like to view the complete card, you can do so on this codepen link: https://codepen.io/Daggett/pen/wvvJxpp

Adding more rows to the table reveals that there is no vertical scrolling functionality. Any advice or suggestions would be greatly appreciated.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

After moving the height:400px to 'card-body' and setting height:100% on table-responsive, the header can maintain its fixed height while the table can now expand to match the parent's 400px height.

https://codepen.io/anijack/pen/YzzZOWE

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card card-bordered m-3 w-50">
  <!-- Can use w-25, w-50, w-75, w-100 to set width - use max-height CSS to set the height of the card -->

  <div class="card-header px-3 pt-2 pb-0 d-flex justify-content-between align-items-center" style="height: 44px">
    <!-- Fix the height of the header -->
    <h4 class="mb-0">Visualize data</h4>

  

  </div>

  <div class="card-body px-3 pt-2 pb-0" style="height: 400px">
    

    <div class="table-responsive" style="overflow: auto; height:100%;" >
      <table class="table table-bordered table-sm mb-0">
        <thead>
          <tr>
            <th class="text-nowrap" scope="col">
              Tenor
              <button class="btn btn-flat-primary btn-sm ml-2">
                <i class="icon">add</i>
              </button>
            </th>
            <th class="text-right px-3" scope="col">1Y</th>
            <th class="text-right px-3" scope="col">2Y</th>
            <th class="text-right px-3" scope="col">3Y</th>
            <th class="text-right px-3" scope="col">5Y</th>
            <th class="text-right px-3" scope="col">8Y</th>
            <th class="text-right px-3" scope="col">10Y</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              01 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            
          </tr>
          <!-- more table rows -->
        </tbody>
      </table>
    </div>

  </div>


  <div class="card-footer px-3 py-0 border-top d-flex justify-content-between align-items-center" style="min-height: 48px">

    <button class="btn btn-link px-1">Clear</button>
  </div>

</div>

Answer №2

Successfully located the answer:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-50 border m-5 d-flex flex-column" style="height: 400px; flex-shrink: 0; flex-grow: 0">


  <!-- Header height adjusted by flex-shrink and flex-grow -->
  <div class="d-flex justify-content-between align-items-center p-3" style="flex-shrink: 0; flex-grow: 0">
    <h4 class="mb-0">Title</h4>
  </div>


  <!-- Additional divs with fixed height using flex -->
  <div class="mb-2 px-3 d-flex align-items-center" style="flex-shrink: 0; flex-grow: 0">
    <input type="text" class="form-control" placeholder="input">
  </div>


  <!-- Content container set with flex-grow-1 to adjust size  -->
  <div class="d-flex flex-grow-1">
    <!-- Overflow settings  -->
    <div class="mx-3" style="overflow: auto">
      <p>
        Unique content goes here.
      </p>
    </div>
  </div>


  <div class="px-3 py-2 border-top" style="flex-shrink: 0; flex-grow: 0">
    <p class="mb-0">Footer</p>
  </div>

</div>

For the content container, d-flex flex-grow: 1 needs to be added, along with overflow:auto for the content.

To maintain the height of fixed parts, flex-shrink: 0; flex-grow: 0 is essential to prevent resizing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing the background color in a JavaScript variable

I've been experimenting with creating a fade in and out effect for a background image on a website. I've also been attempting to capture the background color of a div and store it in a variable. Here's what I have tried: elem = document.ge ...

javascripthtmlcss

Create a row in React JS that includes both a selection option and a button without using any CSS

My dilemma involves a basic form consisting of a select element and a button. What I want to accomplish is shifting the position of the form to the right directly after the select element https://i.sstatic.net/3gfkO.png Below is the code snippet that I ha ...

javascriptcssreactjsfrontend

Vue JS encounters difficulties when attempting to lazy load various images from a randomized image URL

I've implemented a code snippet for lazy loading images with different URLs: <img src="https://source.unsplash.com/1600x900/?hotel,booking.com?v=1" loading="lazy" /> <img src="https://source.unsplash.com/1600x900/?hot ...

htmlvue.js

Issue with Spyscroll functionality

Having some trouble getting Spyscroll to work. Can anyone help me identify the issue? I've been at it all day... I've attempted both the javascript and html+css setups, but neither seem to be functioning correctly. Manually adding the "active" c ...

jqueryhtmlcsstwitter-bootstrap

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors

How can line-height be used to crop the bottom of characters in CSS?

My goal is to make a text character reach the edge below it. Despite having no margin or padding, a space still exists due to the inherent spacing below the font characters. Lowering the line-height removes the top of the characters, but I want to chop o ...

htmlcssweb

Building a grid structure using Bootstrap CSS framework

I am trying to insert some rows inside my <div class="col-sm-1"></div>, but I'm not sure if placing a <div class="row"> inside the col-sm-1 is the correct way to do it. This is the desired effect I am aiming for: https://i.sstatic. ...

htmltwitter-bootstrap-3bootstrap-4

Finding the nearest span element with a selector in styled components

Currently experimenting with integrating Styled Components to target the nearest span element. <label> <span className="">Password</span> <input type="password" id="passwordInput" /> </label> ...

htmlcssreactjsstyled-components

showing information from a table column

Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...

javascriptjqueryhtmljsf-2datatables

javascript popup appears twice in IE when using PHP

After testing this script on multiple browsers, an issue arises when using IE. In all other browsers, the form submission alert only appears once. However, in Internet Explorer, the alert pops up twice. What could be causing this discrepancy? <!DOCTYP ...

javascriptphphtml

Creating a Stylish Side Navigation and Content Layout with Materialize CSS

Seeking assistance with my portfolio design using Materialize CSS, I am encountering some issues. The current appearance of my website can be seen in the screenshot below: https://i.sstatic.net/ey5SV.png The problem lies in the positioning of the About s ...

htmlcssmaterialize

The utilization of media within the meta in Next.js is not allowed

Recently, I came across an interesting article about PWAs on web.dev. The article discusses color schemes and at one point, they talk about it in detail, I'm currently working with Next.js and decided to try implementing the following code snippet: & ...

htmlnext.jsmeta-tags

"Enhance User Interactions with Angular-ui Tooltips Featuring

I recently integrated bootstrap tooltips into my application. While the "normal" tooltips are working fine, I encountered an issue with tooltip-html-unsafe. It seems to display an empty tooltip. Here is my tooltip code: <a><span tooltip-placeme ...

htmltwitter-bootstrapangularjstooltipangular-ui-bootstrap

Effective Strategies for Preserving Form Input Values during Validation Failure in Spring MVC

I am currently working on validating user input, and I want the user's input fields to be retained in case of any validation errors. This is how I have set up my input fields: <form:input path="firstName" class="text short" id="firstName" value=" ...

javascriptjqueryhtmlspring-mvc

Tips for toggling Bootstrap 5 tabs using JavaScript instead of the button version

I am looking to switch tabs programmatically using bootstrap 5. The Bootstrap documentation recommends using buttons for tabs instead of links for a dynamic change. Here is the code I have: $("#mybut").click(function() { var sel = document.querySelector( ...

javascripttwitter-bootstrapbuttontabsbootstrap-5

Calculator screen filled with numbers overflowing beyond its boundaries

I'm encountering an issue with my calculator created in create-react-app where the numbers are overflowing off the screen. Specifically, when inputting very large numbers like 11111111111111111111111111111111, they exceed the output container. I am lo ...

cssreactjscalculatorcreate-react-app

Building a JSON-powered navigation bar with Bootstrap 4

Looking to create a custom navigation bar using Bootstrap 4 and populate it with items from a JSON file. Despite researching various methods, there seems to be limited resources available on this topic. Any assistance or guidance would be greatly appreciat ...

javascriptjqueryjsonbootstrap-4

Adjust the positioning of the background and create a smooth fade effect for

Is there a way to simultaneously change the background position and display an image in front of it? My current solution involves using a second div with padding to center it, but when I hover over the padding of the first div, the image does not change. ...

htmlcsstransition

What is the best way to activate multiple events within an overlapping area containing multiple divs at the same

How can I trigger events on same level divs that overlap in different areas? When there are multiple divs overlapping, only one of them gets triggered. Is there a way to trigger events on all overlapped same level divs? Here is an example code snippet: ...

javascripthtmlcss

The 'SafeString' object does not have a 'get' attribute

I am having trouble rendering a string to a template. Here is the code I am currently working with: context = { 'order': order, 'ordered_items': ordered_items, 'change': change, ...

pythonhtmldjango