Utilizing CSS to create a fixed header that remains visible while the body content scrolls

After experimenting with different versions, I keep encountering the same issue - either the header expands in size as I scroll or the th and td cells are not aligned properly. Take a look at this fiddle for the full HTML and CSS: The scrolling function works perfectly, but you'll notice that the th and td elements progressively fall out of line with each other. Check it out here

<table>
    <thead>
    <tr>
        <th class="th-right" >Fruit</th>
        <th class="td-left" >Colour</th>
        <th class="td-left" >Status</th>
        <th class="th-right" >Number
        <span class="up" text-align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; back to top &uarr;<span>
        </th>
    </tr>
cssscrollheadersticky

Answer №1

When specifying the width of td and th in percentages, keep in mind that the column adjusts its size based on the percentage size of the word inside it. The "percentage" denotes the width of the containing block.
To address an inconsistency at line 33 in your fiddle example, adjust the width to pixels as needed. The following correction can help: 

tbody td, thead th {
    width: 150px;
    float: left;
}

If you want to make the header and footer sticky, include the following CSS rules. Simply set bottom to 0 for the footer.

 .th{
     position: sticky;
     top:0;
    }
.footer th{
   position: sticky;
   bottom:0;
   }

To ensure the entire table matches the width of the 4 content columns:

The issue may arise from using block-level elements with display:block. This causes a fixed width of 100% where 100px is also specified, along with float:left. As a result, if the content exceeds 100px, it spills over to the next block.

Solution: Remove display:block and float:left, and avoid fixing the width at 100px.

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

Initiate an animation upon reaching a designated element using Jquery scroll event

Hey there! I've been trying to create an animation without using any plugins, but unfortunately, I haven't had much luck so far. Here's the code I've been working on. If anyone can help me figure this out, I'd really appreciate it ...

jqueryhtmlcss

I noticed a strange CSS style tag popping up in my browser while visiting certain websites

Hello everyone, I've encountered a strange issue with certain websites from my university and on my localhost. As part of learning web development, I have been studying HTML and CSS. However, I recently discovered a suspicious CSS tag in the header se ...

htmlcsslocalhoststyles

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

htmlcss

Adjust Initial Size Using CSS

I'm looking to adjust the initial scale value using CSS alone, without relying on Javascript. Is there a way to achieve this? <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> ...

htmlcssasp.net-mvc

Using AngularJS to create CSS animations with @keyframes inside a directive is an innovative way

I'm facing a challenge with creating @keyframes animation CSS within an AngularJS directive function. The issue is that I need to use a variable from the scope to generate these keyframes, but I am unsure of how to retrieve it. app.directive("myCSSDi ...

javascriptcssangularjsangularjs-directivecss-animations

Styling a horizontal navigation bar with CSS: Using list items (`li`) versus div elements (`div`)

Is it more semantically correct to float li elements within a ul, or should we opt for floating divs inside an external 'outer' div? ...

css

Tips for positioning a Bootstrap drop-down menu in the center

When you click on the menu, the dropdown typically aligns to the left. How can you adjust the alignment so that the dropdown appears in the center of the screen? <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="styles ...

htmlcsstwitter-bootstrap

The image tag is currently only displaying the user avatar on the homepage and not on any other pages

One of the key features on my website is a navigation bar that takes users to the home page as well as a page where they can post questions. Although the user avatar displays properly on the home page, it does not show up on the page for posting a que ...

phphtmlcsslaravel-5

Is there a method to track the progress of webpage loading?

I am working on a website built with static HTML pages. My goal is to implement a full-screen loading status complete with a progress bar that indicates the page's load progress, including all images and external assets. Once the page has fully loaded ...

javascripthtmlcss

Adaptable text and visual content

I'm working on creating a responsive <div> that contains a perfectly square SVG image and some accompanying text. Here is my current progress, thanks to piecing together information from various Stackoverflow replies: <div class='outer&a ...

htmlcsssvg

Using SASS to add class selectors in a loop

Can I achieve the desired CSS using SASS? .menu IMG { padding-left: 10px; } .menu .submenu IMG { padding-left: 20px; } .menu .submenu .submenu IMG { padding-left: 30px; } I need to add ".submenu" in each loop of the selector and update the padding accord ...

csssass

when an element is hovered over, it activates a reaction on a different element

I've been struggling with the Events assignment we were given. I tried writing my own code, but it had so many errors when I got it checked. I couldn't quite grasp all the explanations of what went wrong, so now I feel a bit embarrassed to share ...

htmlcsscss-selectors

Tips for eliminating the border on a see-through button using CSS

Looking for a solution to remove the line behind a transparent button in CSS? Check out the image below for reference. https://i.sstatic.net/Aq2Dl.png .fullscreen { height: 100%; width: 100%; background: n ...

htmlcssbuttonbackgroundtransparent

Having difficulty implementing a pseudo-selector with a custom directive within an ng-repeat loop

I have created a directive for a table with collapsible rows that allows only one row to be open at a time. Here is how it looks: HTML: <div class="my-table"> <div class="table-header"> ... table headers ... </div> & ...

cssangularjs

Elegant CSS background image fade effect

Having a small JS script that functions properly, but encountering an issue when quickly hovering over buttons causing the smooth transition effect to not work as desired. This abrupt change in image is quite unappealing. Any help would be greatly appreci ...

javascriptcsscss-animationscss-transitions

Editing a CSS style sheet for ASP.NET

I am looking to update a CSS file and save the changes. On my ASP.NET C# web page, I want the admin to have the ability to modify styles from the admin panel, such as colors, background colors, and font sizes. For instance, I would like the admin to be ab ...

c#asp.netcssstylesheet

My attempts to use media queries are being ignored by Internet Explorer

While other browsers recognize and function properly, it seems like IE is not recognizing my media queries. Could there be something wrong with my code? I've created a similar design before without any issues, so why is this one causing problems? Her ...

htmlcssinternet-explorermedia-queries

The Bootstrap carousel comes with a brilliant feature! Conceal those 'previous' and 'next' buttons when you reach the first and last slide. However, it seems like the 'slide' event is not functioning as

I have implemented a standard Bootstrap carousel on my website: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data- ...

jqueryhtmlcsstwitter-bootstrap

Suggestions for showing an error message when a field is empty and the user moves on to the next one

When a user begins typing a password without entering their email address first, immediately display the message - “Please Enter Your Email Address First”. My project utilizes bootstrap4 and jQuery/Javascript. I need the cursor to move to the field whe ...

javascriptjquerycsshtmlbootstrap-4

Create a button that matches the dimensions of the background image

I am working with a form that includes a submit button featuring a background image. <button type="button" class="button" alt="Send" onclick="validate_form_newsletter_wide( form )"></button> Everything works well when I define the dimensions ...

htmlcss