Table with a set height that remains constant regardless of the space available, allowing it to become scrollable

I need my table to maintain a fixed dynamic height so that it scrolls instead of expanding.

Currently, I have a bootstrap row with two columns. What I want is for the left column or the table itself to adjust its height based on the content in the right column.

<div class="row">
<div class="col">
    <table class="table table-sm table-light table-striped">
        <tbody>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        (additional rows omitted)
        </tbody>
    </table>
</div>
<div class="col">
    <h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis
        minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>

    <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
</div>

Currently, the table expands downward as more rows are added. However, I want it to stop expanding when it reaches the height of the content in the right column and start scrolling instead.

I am using bootstrap for styling purposes.

Thank you in advance!

htmlcsshtml-tablescrollbootstrap-4

Answer №1

If you require the table to adjust its height based on the smaller column, JavaScript is necessary...

We can copy the height of the right column and paste it on the table, implementing a scrollbar for better content visibility

sample piece of code provided below:

$(window).on("resize", function() {
  $(".col:nth-child(1)").css('height', $(".actualContents").height());
  $(".col:nth-child(1)").css('display', 'block');
  $(".col:nth-child(1)").css('overflow-y', 'scroll');
}).resize();
(previously shown HTML and JavaScript snippets)

Answer №2

Since the previous response was in jQuery (which I do not use), I will provide a JavaScript solution:

const rightColumn = document.getElementById("rightColumn").firstElementChild;

const table = document.getElementById("actualContents");

window.addEventListener("resize", (evt) => {
    resize();
});

function resize() {
    table.style.height = rightColumn.clientHeight;
    table.style.overflowY = "scroll";
}
resize();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <table class="table table-sm table-light table-striped">
        <tbody>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          [...]
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col">
      <div id="actualContents">
        <h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>

        <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis
          suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis
          cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
      </div>
    </div>
  </div>

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

Issue with @media print and hiding elements

I've been racking my brain for hours trying to figure out why this isn't working. I have a Wordpress site where I'm attempting to hide the header, menu, and footer content from being printed. Within my theme's style.css file, there is a ...

cssprintingmedia-queries

What is the best way to include Google Calendar in a div container while ensuring it is responsive?

I'm currently working on the layout of a website that features a slideshow of images at the top, followed by an embedded Google Calendar. I've encountered an issue with the responsiveness of the Google Calendar within its designated div container ...

htmlcssgoogle-calendar-api

What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...

htmlcss

Mobile video created with Adobe Animate

Currently, I am designing an HTML5 banner in Adobe Animate that includes a video element. However, due to restrictions on iPhone and iPad devices, the video cannot autoplay. As a workaround, I would like to display a static image instead. Can anyone provid ...

javascriptcsshtmljquery-animateanimate-cc

Create a layout with two rows of two buttons in HTML aligned to the right side while maintaining the left side's

I am currently working on designing a menu for my webpage that includes four buttons. My goal is to have two buttons displayed at the top of the page and two buttons displayed at the bottom. To achieve this, I have written the following CSS code: .navButt ...

javascripthtmlcss

Non-sticky hamburger menu is not fixed in place

Having trouble with the hamburger menu staying sticky? The hamburger icon remains in the corner as you scroll down, but the menu stays fixed at the top of the page, making it hard to access. You tried tweaking the code you found on Codepen, but couldn&apos ...

javascripthtmlcss

Troubles with Iframe in Selenium using Python

I'm facing a challenge using Selenium with an iframe. The website's structure is as follows: <tbody> <tr> <td> <iframe> <html> </iframe> </td> ...

pythonhtmlseleniumiframe

How can I activate the Parralax effect specifically for Laptops and Desktops?

Is there a way to activate the Parallax effect only on laptop and desktop views? Currently, I have the following code, but it causes issues with displaying images on certain browsers like Safari. .parallax { /* Full height */ height: 100%; /* Create t ...

htmlcssmobile-safari

Is it possible for the child of mat-dialog-content to have a height of 100%?

Check out this demo showcasing the issue: https://stackblitz.com/edit/stackblitz-starters-tdxfuc?file=src%2Fapp%2Fapp.component.ts When the content within the mat-dialog-content becomes too tall, I aim to have control over where the scrollbar will be visi ...

csssassmaterial-uiangular-materialscrollbar

Seeking assistance to pinpoint the issues in my code. Specifically related to PHP, MySQL, and HTML

Is anyone able to assist me with troubleshooting my registration page issue? The database connection appears to be working correctly, but I'm not seeing any new users added to the table. This is a snippet of my HTML: <form action="register.php" m ...

phphtmlmysqlformsuser-registration

How can I attach :after and :before pseudo-elements to a submit button?

I'm attempting to enhance my submit button with :after/:before elements, but I'm having trouble getting it to work properly. Specifically, I want to add a swipe (Sweep To Right) transition effect on the button from left to right. Similar to - th ...

htmlcss

Why is a div nested inside an overflow: hidden; div not expanding to the full width of its content?

.container { white-space: nowrap; overflow: hidden; } .inner { width: 100%; } .list-item { display: 'inline-block', boxSizing: 'border-box', border: '3px solid black' } import React, { Component } from 're ...

javascriptcssreactjs

What is the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Is there a way to set all font properties for H1-H6 headings in one CSS declaration? CSSLint.net is flagging multiple definitions of heading styles as an issue. I currently have specific styles for each heading level: h1 { font-size: 1.8em; margin-top: ...

csshtmlxhtml

Retrieve the final element within an HTML framework

Is it possible to target the final div along with its content exclusively using CSS and child combinators? My goal is to apply custom styling to it. <body> <div> <div> <div> <div> <div> ...

javascriptcssdom

The use of Angular directives is restricted to one per page

I'm encountering a small issue with my angularJS directive. I want to display 2 photos in different ways using other HTML codes, but I'm running into a problem where only one directive works per page. The second one only works when I comment out ...

javascripthtmlangularjs

Incorporate a static CSS file using Express.js

I'm facing an issue with my .css file that was generated using Koala from a .scss file and added to my index.html. Unfortunately, the page is not serving my file because I forgot to add it as static on my Express server. I have tried following the var ...

cssexpresssass

extract all hyperlinks from a specific div using JSoup

Hey there, I am currently utilizing Jsoup to parse through a website and my goal is to extract all the links from the provided HTML code: <ul class="detail-main-list"> <li> <a href="/manga/toki_wa/v01/c001/1.html" title="Toki wa... ...

javahtmlweb-scrapingjsoup

Having difficulty setting up page titles in AngularJS

Using AngularJS, I am developing a web app that is not a single page application but all the code is contained in one file- index.ejs. The setup for my index.ejs file looks roughly like this: <head> <title> Main Page </title> </he ...

htmlangularjsuiviewsingle-page-applicationangularjs-ng-template

Is there a way to position the button and text side by side in a straight line

I am looking to have the button and text aligned on the same line. <div class="offers"> <div class="container" style="line-height: 300px; text-align: center;"> <h1>Enjoy our offers with your family <button class="offers-bu ...

htmlcss

The size of the image remains as is and does not adjust in

For some reason, my image is not adjusting its size properly. Despite searching online for solutions, I have been unable to resolve the issue. According to W3schools, I should set it up like this using the formular-banner class. .formular-banner { ...

htmlcssresponsive-design