Establish the container with a specific height and enable scrolling functionality

Here is the code snippet I am currently working with:

<section class="table">
  <div class="table-row">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
  </div>
  <div class="table-row">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
  </div>
</section>

I'm looking to make the <section> element a fixed height so that scrolling will be required to view additional rows. How can I achieve this?

htmlcss

Answer №1

You must add another layer of wrapping around .table. Implement CSS overflow-y and height on the parent element.

.table-wrapper {
  overflow-y: auto;
  width: 200px;
  height: 80px;
  float: left;
}
.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
<div class="table-wrapper">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
  </div>
</div>

Answer №2

Insert this snippet into your CSS file

section.table {
    height: 55px;
    overflow: scroll;
}

If you prefer a vertical scroll only, add overflow-y:scroll;. For horizontal scrolling, use overflow-x:scroll;.

Answer №3

To achieve this goal, you must utilize the overflow-x and height properties in the <section> class.

The overflow-x property determines how to handle overflowing content at the left/right edges of an element's content area.

.table {
      height: 100px; /* Set a fixed height */
      width: 100px;
      overflow-y: scroll; /* Enable scrolling */
}
<section class="table">
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell">2</div>
    <div class="table-cell">3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell">2</div>
    <div class="table-cell">3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell">2</div>
    <div class="table-cell">3</div>
  </div>
</section>

Additional valuable resources on the overflow property:

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

Guide for executing Java code and displaying HTML form fields concurrently in JSP

I have created a JSP page with form fields and Java code in scriptlets. I have imported the Java code into the JSP page and created an object to call the functions of that Java class. When I run the JSP, the page remains blank until all the Java code has ...

javahtmljspbackgroundform-fields

Tips for aligning an image on top of another image

Here is the code I am working with (also pasted below). My goal is to create a layout with two columns, where the first column features two images and the second column displays some text. In the first column, I specifically want the first image to have a ...

htmlcss

Having trouble accessing a CSS file through HTML

Is there a reason why I am facing difficulties accessing main.css from app.html to enable Tailwind CSS? When I try putting it in the style brackets in the .svelte file itself, it throws an error. Can anyone explain why this is happening? <link rel= ...

htmlcsstailwind-csssvelte

Guide on stacking two divs on each other in response to a decrease in screen width

In this particular section, there is a div labeled programDescriptionDiv. Inside programDescriptionDiv, there are two separate divs. Normally, these two divs each take up 50% of the screen width. The goal is to have the second div stack below the first on ...

htmlcssflexbox

Consistent validation success with login authentication

I am currently working on a project that involves querying a server for user authentication using C# and ASP.NET, as I am still learning these technologies. Previously, I worked with JSP. The issue I am facing : For some reason, my methods are always re ...

c#asp.nethtmlrazorwebforms

The checkbox filter in Angular 6 has the ability to replace the previously selected

I've been working on creating a filter system using checkboxes. Below is a snippet of the code I'm currently using: filter.pipe.ts import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'filter2' }) ...

javascripthtmlangularfilter

Ways to align radio buttons vertically

I am currently working with three radio buttons that are initially aligned horizontally, but I would like to change their alignment to be vertical instead. What is the best way to achieve this? * { margin: 0; padding: 0; box-sizing: border-b ...

htmlcss

jQuery now enables the number field to accept not only one period but multiple periods

I need to update a number field in a form to accept multiple periods, specifically for entering software version numbers. Currently, the code I am using only allows for one period to be entered, resulting in an error when two periods are added to the fie ...

jqueryhtmlforms

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

javascripthtmljquery

Tips for aligning a div in the center while adjusting screen size

My goal is to showcase a dashboard with a card layout. The desired layout can be seen https://i.sstatic.net/OWgpE.png: Here is a snippet from the HTML File: <div id="overallCanvasWrapper" class="statistic-container"> <p ng-show=" ...

htmlcss

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: https://i.sstatic.net/RPKvH.png const path = require("path"); var webp ...

cssreactjswebpackag-gridag-grid-react

Is Socket.io combined with Redis the best architecture for an interactive gaming experience?

My current setup involves a NodeJS scaling architecture with Redis, specifically designed for a real-time multiplayer game. However, I'm facing challenges in configuring separate lobbies for players, as the load balancer assigns users to different ser ...

javascripthtmlnode.jsredissocket.io

Reset the dropdown list back to its initial state

I am facing an issue with two dropdown lists in my view. When I change the value on the first one, it should update the second one accordingly. Initially, this functionality works fine with the script provided below. However, if I change the first dropdown ...

javascriptjqueryhtmlasp.netasp.net-mvc

How to make text in HTML and CSS stay at the bottom of a div?

I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code: vertical-alig ...

htmlcss

Positioning child divs using CSS

I am trying to arrange the #inner2 and #inner3 divs to float next to each other while also adjusting to fit perfectly within the #outer div when the browser window size changes. Unfortunately, inner3 is not floating correctly as it should be and is overlap ...

cssposition

Having trouble updating attribute through ajax requests

How can I set attribute values using ajax-jquery? Here are some snippets of code: HTML_CODE ========================================================================== <div class="col"> <ul class="nav nav-pills justify-content-end& ...

javascripthtmljqueryajax

Troubleshooting problem with spacing on three horizontal divs

I am currently working on building an E-commerce website to gain some practice. Here is how the div is set up: .small-container { max-width: 1080px; margin: 5px; padding-left: 25px; padding-right: 25px; } .col-4 { flex-basis: 25%; padding ...

htmlcss

Is there a way to right-align the labels and input fields simultaneously?

Is there a way to line up the labels and inputs on the right side so they all appear in the same row? .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; } <div class=" ...

htmlcss

Positioning two divs to the right of another div

I am facing an issue with aligning the menu and categories divs to the right of the logo div in the following example: jsfiddle. I want them to remain stacked one under another as they are currently, but I am unable to achieve the desired display. Any ass ...

css

Managing browser cache while developing locally

During development testing, how can you selectively disable caching for local scripts and styles while keeping cache enabled for external ones? Ideally in Firefox. When editing css, js, or sprite files on my developmental site, I find myself needing to fr ...

javascripthtmlfirefoxcachingmaps