Lock in the top row (header row)

In a node.js application: How can I lock the top row of a table in place, similar to Excel's freeze panes feature?

I think this might involve using some CSS styling, but I'm not exactly sure how to achieve it. When I tried using fixed, the entire table was frozen instead of just the top row. This meant that when new items appeared below the visible area of the browser window, no vertical scroll bars were shown to access them. Using sticky didn't seem to work either.

.css

#one {
  position: fixed;
  top: 100px;
  left: 15px;
}

app.js

<div className="row" id="one">
            <table className="table-hover">
                <thead>
cssnode.jsreactjsexpress

Answer №1

Looking for a way to create an Excel-like fixed table head? One solution involves using the position: sticky; property, which is both classy and practical. Simply click on the first row to make it stick:

th, td {
    width: 100px;
    height: 100px;
    background-color: #eee;
    text-align: center;
    border-bottom: 2px solid transparent;
}
tr.sticks {
    cursor: pointer;
}
tr.stuck th {
    position: sticky;
    top: 0px;
    border-bottom: 2px solid #000;
}
<table>
    <tbody>
        <tr class="sticks" onclick='this.className = this.className == "sticks" ? "sticks stuck" : "sticks";'>
            <th> Name </th>
            <th> Amount </th>
            <th> Date </th>
            <th> Color </th>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
    </tbody>
</table>

If you prefer a JavaScript approach, there's another option that provides more usability. This method allows multiple rows to be stuck at the top of the table. Once again, simply click on a row to stick it:

td {
    width: 100px;
    height: 100px;
    background-color: #eee;
    text-align: center;
    border-bottom: 2px solid transparent;
}
#table-head {
    top: 0px;
    position: fixed;
}
#table-head td {
    border-bottom: 2px solid #000;
    background-color: #ddd;
}
<table id="table">
    <thead id="table-head"></thead>
    <tbody id="table-body">
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    var table_head = document.getElementById("table-head");
    var table_body = document.getElementById("table-body");
    var stick_it = function(el) {
        var row_html = el.outerHTML.replace("stick_it(this);", "unstick_it(this);");
        el.remove();
        table_head.innerHTML += row_html;
        table.style.paddingTop = table_head.children.length * 104 + "px";
    }
    var unstick_it = function(el) {
        var row_html = el.outerHTML.replace("unstick_it(this);", "stick_it(this);");
        el.remove();
        table_body.innerHTML += row_html;
        table.style.paddingTop = table_head.children.length * 104 + "px";
    }
</script>

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

CSS for a Div with a Subtle Curve at the Bottom

Is there a way to achieve this specific shape using CSS? I attempted to use the following resources, but they didn't provide me with the desired outcome. Curved border with stroke in pure CSS? http://jsfiddle.net/ECHWb/ .banner-img{ height: 661p ...

htmlcss

Is there a way to enclose hashtags and Twitter usernames in a link?

Currently, I'm developing an application that allows users to create posts and mention other users by using hashtags in the post. When retrieving the list of posts through an API call, the challenge arises on how to wrap these hashtags and usernames w ...

reactjsnext.jsnext-linkreact-link

Matching CSS attribute values with another attribute

Can CSS be used to target elements based on the value of another attribute? For instance: <div data-attr1="abc" data-attr2="def"></div> <div data-attr1="abc" data-attr2="abc"></div> I am looking for something like this (although i ...

jqueryhtmlcss

What is the method for identifying the environment within an Express.js application?

Is there a reliable method for determining the environment in which an expressJS app is currently operating (development, test, production)? I have checked process.env, but found no clear indication of the environment. I know that variables can be set in ...

javascriptnode.jsexpress

Disabling the final grid cell(s)

I am currently working on a 4 column grid in ReactJS. The grid includes various elements with images and text. I want to ensure that if there are five elements filled, the last three should be inactive so that each row always has four columns without any e ...

cssreactjs

Align the Vuetify v-btn to the right in a horizontal layout

I'm having trouble aligning a v-btn to the right side. Despite trying various options, I can't seem to get it to work. I just want to know the simplest way to ensure that the register button is positioned at the very right of the column. For the ...

cssvue.jsvuetify.js

Utilizing command line parameters in Node.js through package.json configuration

The Jest documentation includes the following quote: Jest documentation: Node.js v6.* has Proxy enabled by default; if you are not using Node v6.*, be sure to run Jest with node --harmony_proxies node_modules/.bin/jest. My tests are running via npm tes ...

node.jsjestjs

A guide on displaying a text file from a URL in a reactjs application

When utilizing the code provided below, I have successfully managed to display the content of a local text file on a webpage. However, when attempting to render a text file from a URL, the state becomes null resulting in an empty display. In order to ren ...

javascriptreactjs

Unable to save input from <from> in the React state object

I'm currently working on a project in reactjs where I need to store user input in the react state object. I followed an example from reactjs.com, but it seems like the input is not being stored in the state object as expected. class CreateMovieForm ex ...

javascriptreactjs

Best practices for removing a specific element from an array using MongoDB

My goal is to remove the like from a post if the user has already liked it. I've experimented with filters and other techniques, but nothing seems to be working. The process of adding a like is functioning correctly, as the like object is an Array co ...

node.jsmongodb

printing not displaying colors

Is there a way to maintain the colors while printing my HTML page to PDF? <table class="table table-responsive table-striped"> <thead> <tr> <th>Elev</th> <th>Session n ...

htmlcsstwitter-bootstrapprinting

Error in AWS Lambda: JSON parsing error due to unexpected token 't' at position 6

I'm currently working on a basic lambda function that utilizes a post request to insert data into DynamoDB. However, every time I deploy the lambda function and test it using Postman, I keep encountering a 502 Bad Gateway error. To troubleshoot this ...

javascriptnode.jsaws-lambdaamazon-dynamodb

Unable to display the express-handlebars template

Just starting out with node and I'm running into some issues trying to get a basic express-handlebar setup to render a static HTML page: require('./config/config'); const path = require('path'); const http = require('http&apo ...

node.jsexpressexpress-handlebars

The Redux states are undergoing some peculiar transformations

I am facing an issue with two different states where one state includes a portion of the other. Whenever the second state is modified, the content of the first state also changes and it is puzzling me. Here is the code snippet for updating the second stat ...

reactjsreduxredux-thunk

Columns with adjustable widths

I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen. Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the enti ...

htmlcss

Having issues with showing an image from a specified component in a separate file

I am facing an issue where my image is not displaying in the app.js file, even though I have imported it from another file named comp.js. Here is the current code in app.js: import React from 'react'; import TextImg from "./Comp"; impor ...

javascriptreactjsreact-nativereact-props

What is the best way to capture static content in an express application?

I recently encountered an issue with my nodejs application static directory setup. I have configured the static directory as follows: app.use(express.static(__dirname + '/mydir')); Within the 'mydir' directory, there is an index.html ...

node.jsexpress

Is it not feasible to place a well within a column using Bootstrap?

Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image: here Here is the code I currently have: <div class="container-fluid"> <div class="row row1" style=&q ...

csstwitter-bootstrap

Creating a vertical stacked barchart using React and Svg without relying on any external libraries

I have been working on a piece of code that utilizes React and SVG to create bar charts without the use of any third-party libraries. Currently, my charts are displayed horizontally, but I would like them to be displayed vertically instead. Despite trying ...

javascripthtmlreactjssvgcharts

Do you have any suggestions on how to fix this npm SQLite installation issue?

Could use some help with an SQLite installation error I'm encountering. Any ideas on what the issue might be and how to resolve it? C:\Users\jacka\Downloads\discord-emoji-stealer-master\discord-emoji-stealer-master>npm i & ...

javascriptnode.jsnpm