How to create a scrollable table using HTML and CSS

I created a Dashboard, but I'm having trouble making my mailPage scrollable.

If you have some time to spare, could you please take a look at my website and help me with this issue?

Here is my code: 

window.addEventListener("load", function () {
    var deleteSVG = '<svg class="deleteSVG" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2871 5.24297C20.6761 5.24297 21 5.56596 21 5.97696V6.35696C21 6.75795 20.6761 7.09095 20.2871 7.09095H3.71385C3.32386 7.09095 3 6.75795 3 6.35696V5.97696C3 5.56596 3.32386 5.24297 3.71385 5.24297H6.62957C7.22185 5.24297 7.7373 4.82197 7.87054 ...
});
html{
  overflow: hidden;
}
.mailTableBody{
    display: inline-block;
    padding: 2% 2% 2% 2%;
    overflow-y: auto;
    width: 50%;
    height: 67%;
}
.mail {
    width: 50%;
    height: 80%;
    background: green;
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 0 0 1px 1px black;
    margin-top: 2%;
    position: relative;
    margin-bottom: 30%;
}

.deleteSVG{
    height: 20%;
}
<div class="page mailPage" id="mailPage">
        <table class="mailTable">
            <tbody class="mailTableBody" id="mailTableBody">

            </tbody>
        </table>
    </div>

Your assistance would be greatly appreciated.

htmlcsshtml-tablescrolloverflow

Answer №1

element, you can experiment with changing the overflow : hidden setting of the html class within your specific .mailPage page. You may try implementing the following code snippet: 
.mailPage .page {
    
    /* include the line below */
    overflow: scroll !important;
}

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

Generate random unique values from an array to populate a text input field in HTML. Display a message once all unique values have been shown

I have included an option code and text box below: <select id="sel" class="form-control input-lg" data-live-search="true"> <option value="">-- Choose Your Country--</option> </select><br/><br/><br/> &l ...

htmljqueryarraysjsonrandom

Utilize jQuery to style the background of the webpage, while excluding the Modal element when using Bootstrap

I'm currently working on implementing foggy.js () to create a blurred background effect for Bootstrap's Modal. While I've successfully blurred all elements in the background, the Modal Popup itself is also appearing blurry. So my question is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Decoding a Json list with angularJS

I have a JSON dataset structured as follows: $scope.jsondata = [{filename:"/home/username/textfiles/0101907.txt"},{filename:"/home/username/textfiles/0124757.txt"},{filename:"/home/username/textfiles/0747332.txt"} ... ]; Here is my HTML code: <li ng ...

angularjsjsonhtml

Managing websites on Android when the keyboard is displayed

I am currently facing an issue with my webpage on Android (Galaxy SIII). The problem occurs when visitors try to enter their email in the form at the bottom of the page. The keyboard becomes visible, causing the design to look messy. When using Chrome, the ...

javascriptandroidhtmlcss

Hover over the drop-down menu to enable tab on hover mode

Is it possible to make the tab switch to hover mode when I rollover the drop down sub-menu without using JavaScript, and only using CSS? <li id="anchor" class="title dropdown"><a href="#">Main Tab</a> <div class="co ...

htmlcss

Using ng-options with the Add New feature is not compatible with the select statement

Hello everyone, I have some JSON values that look like this: [{"Employee":{"Emp_id":"EF00001","First_name":"Aruna","Last_name":"Jayalath"}}] Unfortunately, I am having trouble retrieving the values within the select statement when running this function i ...

javascripthtmlangularjs

The storage of HTML5 data is not being saved locally

<html> <head> <title></title> <style type="text/css"> body { font-family: tahoma; } h2 { font-weight: bold; border-bottom: 2px solid gray; margin-bottom: 10px; } #dat ...

javascripthtmllocal-storage

Transform PHP array into a JavaScript array

Currently, I am using Laravel and retrieving a list of values from a database with the following code: $idordenes = DB::table('ordenes')->select('id')->get(); Upon echoing the idordenes variable, the output is as follows: [{"fa ...

javascriptphparrayshtmlweb

Tips for navigating a dynamic viewport using scroll movement

Attempting to create a responsive page with two distinct sections at this example link including: Map View Table View Both of these views (table and map divs) need to be responsive without a hard-coded height, so the size of the map div adjusts automatic ...

javascriptjquerycss

Using HTML and CSS to Trigger Animation of Gif (or video) Upon Mouse Hover, Depending on Mouse Position

Is there a way to create an animation for a gif or video that changes based on the position of the mouse relative to the frame? For example, if the gif shows someone turning around 360 degrees, I would like the person to be facing forward when the mouse i ...

htmlcssanimationvideogif

Showing information to several classes using JavaScript

I am currently developing a "Gamebook Engine" that enables users to set a custom username. The user name is extracted from an input element with the id="setUserNameInput" and stored using the function setUserName(). It is then displayed or loaded into an e ...

javascripthtmlcssclass

Turn off sticky sidebar feature for mobile-friendly layout

I have encountered an issue with my script that I need assistance with. I am trying to disable this script for responsive or mobile view, but despite trying various methods, it is not functioning as expected. <script type="text/javascript"> $(func ...

javascriptjquerycss

Efficiently styling table Spans with styled components in React

Can anyone help me with a frustrating CSS problem I'm facing? I am trying to render these tags as spans, but they are not separating properly as shown in the image below. They appear stuck together and I can't figure out why. I am using styled co ...

javascriptcssreactjsmaterial-ui

Populate Select2 with default value using knockout.js

I'm working on a Knockout.js web application that includes a select2 dropdown. My goal is to bind both the id and text values to a variable, not just the id itself. Here's the data I'm working with: var vehicles = [{id: 1, type: 'Car&a ...

htmlselectknockout.jsjquery-select2dropdown

Creating personalized tags or components by utilizing insertAdjacentHTML in Vue

With the use of insertAdjacentHTML, I am able to create HTML elements such as div and span, but it seems that I cannot generate custom tags like <myComponent> </myComponent>. I understand that insertAdjacentHTML can create HTML elements, but a ...

javascripthtmlvue.js

Exploring the process of setting a background image within a div tag

My goal was to design a clickable box that would redirect users to "#". I initially thought about using area maps within div or p tags, but unfortunately that wouldn't work. Does anyone have any suggestions for alternative solutions? ...

htmlcssarea

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

jqueryhtmlcss

The ion-range slider does not function properly when trying to display a central label

After customizing the ion range slider to suit my needs, I am looking for some simple functionalities: 1. The label should be centered. 2. When clicking on the label, the handle should move accordingly. 3. There should be a color gap between two valu ...

jqueryhtmltwitter-bootstraprangesliderion-range-slider

Is it expected for every element to return true when checking their visibility with isDisplayed() after performing a get() method

Why are WebDriver get() and isDisplayed() methods not functioning as expected? According to the documentation: This is done using an HTTP GET operation, and the method will block until the load is complete As seen in similar questions such as Wait fo ...

htmlasynchronousseleniumwebdriverrendering

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional Unfortunately, my attempt at modification (shown below) did not work. The use of classList.replace should change all instanc ...

javascripthtmlcss