HTML table featuring a stationary header row

I have designed an HTML page that consists of three sections: a header, a footer, and a table section sandwiched between the header and footer. The header and footer are fixed at the top and bottom respectively, with a specified height set using CSS (top:0px; and bottom:0px).

All three sections are enclosed in div elements. I'm trying to make the table section scrollable while keeping it fixed between the header and footer. In other words, I want the table to stretch and adjust its size accordingly when zooming in or out of the page.

Can anyone provide guidance or assistance with this? Thanks!

Answer №1

To create a custom positioned div, ensure that it is absolutely positioned. Make sure to adjust the position using properties like bottom, for example, if the footer has a specific height. Adding a border to the div is recommended. Additionally, setting overflow on the div will place the scroll bar inside the div instead of on the table itself.

Include the table inside the div and set its width to 100% for proper alignment.

Avoid setting a fixed height on the table as it may lead to overly tall rows with limited content. Placing a div outside the table helps maintain proper structure and layout.

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

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

The loading icon appears stuck and does not rotate on iOS version 15.3 and above, but functions properly on versions below 15.3

The loading icon does not spin on iOS versions > 15.3 or 16.1, but it works perfectly fine on lower iOS versions for iPhone and iPad, as well as on Android browsers. Below is the CSS code for reference. I've attempted using webkit for Safari and a ...

Obtaining a single element from a hidden display while dragging using Jquery UI

Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. ...

Ways to address time discrepancies when the countdown skips ahead with each button click (or initiate a countdown reset upon each click)

Every time I click my countdown button, the timer runs normally once. But if I keep clicking it multiple times, it starts skipping time. Here are my codes: <input type="submit" value="Countdown" id="countdown" onclick="countdown_init()" /> <div i ...

Issues with displaying AngularJs directive template

Having an issue with my AngularJs directive. Everything works perfectly fine when I use the "template" attribute, but when I switch to using "templateURL", it stops working. Both the JavaScript file for the directive and the HTML file for the template are ...

The image source is unable to locate the image

Adding an image to my React component is proving to be problematic as the alternative text keeps being displayed instead. In the Navbar component, this is how I am trying to include the image: <img src="../assets/images/nav_logo.png" alt=&quo ...

Strange Appearance of Angular Material Slider

I am experiencing some issues with my slider and I'm not exactly sure what's causing them. [] .big-container { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .question { display ...

Do not ask for confirmation when reloading the page with onbeforeunload

I am setting up an event listener for the onbeforeunload attribute to show a confirmation message when a user attempts to exit the page. The issue is that I do not want this confirmation message to appear when the user tries to refresh the page. Is there ...

Divs that are floated and only partially visible at the end

My layout consists of 6 Divs floated left to create 6 columns. The width of all these floats combined may extend beyond the window width for most users, especially with the 6th column included. Is there a way for this 6th column to be partially visible ( ...

How can you incorporate a unique font using a CSS class within a bootstrap class declaration?

Is it possible to add a CSS class to a pre-existing bootstrap class on a webpage? For example, I know how to add a custom font to a bootstrap page, but I only want to change the font of a specific line while keeping the rest of the text with the default fo ...

Tips on how to select only the currently active tab and change its background color

I am currently troubleshooting the AJAX tabs functionality on my website. The issue I am facing is that the current code does not apply any styling to indicate an active tab. I believe I may need to use some JavaScript code to address this problem, but I ...

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

I have two list items listed below: <li name="luxury" class="cars luxury> <div id="featured_lux" name="featured" class="carImg_lux col2_lux "> My Luxury Car<img border="0" class="car-im ...

Display various sets of data from multiple models within a single view

My project is focused on Asp.net Mvc and I am encountering a challenge in displaying multiple model data in one view. However, I do not want to showcase it in a list or grid format, instead, I prefer a Form View style. The two modal classes involved are Pr ...

Is there a way to make the onKeyDown event function properly in Next.js/React?

I'm currently developing a website with Next.js and am facing an issue trying to execute a simple function when a key is pressed. Strangely, the onKeyDown event isn't getting triggered as expected in my code snippet: <main onKeyDown={e => c ...

Tips for replicating input boxes in a while loop

https://i.sstatic.net/iuNIl.png HTML : <table> <tr> <td> <input type="text" name="name[]" value=" echo $ail"> <label >Address</label> <input type="text" name="coun ...

Apply CSS code to create a fading effect for a container

Below is the code for my accordion list, created using only CSS and HTML. Whenever a heading is clicked, the text slides in with a different background color. How can I make it so that the container with the text and different background color fades in and ...

Ways to improve the transition of a <video> background using CSS

My webpage features a unique 10-second video wallpaper achieved using only pure CSS. Below is the code I used: <style> video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; he ...

How can we effectively utilize LESS variables in styles.less when working with LESS files within components in Angular versions 6 or 7?

Running Angular version 7.0.0 will generate a folder structure typical for "ng new". Below is the content of my styles.less file: @personal-black: #0000; This snippet shows the content of my app.component.less file: ...

Declare a jQuery variable containing HTML elements

Greetings! I am facing an issue while attempting to create a jQuery variable that stores a table meant for displaying in different sections of a website. Unfortunately, I am encountering an error and struggling to comprehend the reason behind it. Below is ...