Show the table header at all times, even when the rows are hidden from view

Whenever the number of rows in my dynamic table changes due to user events, all tr elements that do not have the class .selected are set to display:none;. This means that at times, none of the table rows have the class selected. The problem arises when I hide these rows using display:none, because then the table header also disappears unless the initial first row is given the class selected. What I want is for the table header to always stay visible, regardless of which rows are hidden or shown.

tr:not(.selected) {
    display:none;
}

I attempted solutions like adding not(:first-child), but they did not work. Am I taking the right approach with this method? I thought that constantly adding and removing rows dynamically would be too labor-intensive or slow down the performance.

htmlcss

Answer №1

Remove the unnecessary colon after your not:

tr:not(.selected) {
  display: none;
}

To hide only data rows (not header rows) without the .selected class, consider organizing your table with <thead> and <tbody>:

<table>
  <thead>
    <tr>
      <th>
        Heading 1
      </th>
      <th>
        Heading 2
      </th>
      <th>
        ....
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <!-- your data here -->
    </tr>
  </tbody>
</table>

Now, use this CSS to make sure only body rows - not header rows - disappear without the .selected class:

tbody tr:not(.selected) {
  display: none;
}

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

What is the best way to use multiple encoding types when sending data via a POST method in Node.js?

My current challenge involves sending a combination of name and description text data alongside a video file. Unfortunately, I've encountered an issue where I can only send either the video or the text, but not both simultaneously. Below is the code ...

javascripthtmlnode.jsexpresspost

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

jqueryhtmlcsstwitter-bootstrap

What's preventing it from being cached?

So, I have a website (https://illution.dk) and most of my files that are included or linked are returning a "304 Not Modified" header. However, there is one exception: https://illution.dk/include/style.php, which always returns a "200 OK." The headers for ...

phphtmlcsscachinghttp-headers

What could be causing my buttons to not line up properly?

My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second o ...

htmlcss

Creating a flexible row layout in Bootstrap 4 that adapts responsively

Here is the current layout of the page: https://i.sstatic.net/KuHiT.png However, when resizing to a mobile screen, the flex boxes overflow the container: https://i.sstatic.net/kI3ee.png Html: <div id="bars" class="d-flex flex-row text-whi ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

LESS: Using variable values in mixin and variable names

I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...

javascriptcssnode.jssvgless

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

htmlcsshtml-tablesticky

maintaining page state without navigating

I'm exploring the concept of using HTML5 pushState and I have found it to be quite effective. I am able to add states, navigate back in the browser, and everything seems to function properly. However, upon refreshing the page, I am consistently met wi ...

htmlroutespushstate

How to access a particular tab in Bootstrap 5 using an external link

Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below: <div class="products-btn"> <a href="products.html#pills-profile">view all</a> </div> On Pro ...

javascripthtmlcssbootstrap-5

Optimizing the appearance of an unordered horizontal list in the most effective manner

When attempting to make lists horizontal and hide default bullets, is it necessary to apply {display:inline} and {float:left} to both the <li> tags or would just one of these properties suffice? <ul> <li><a href="#">First item< ...

htmlcssxhtmlhtml-lists

Completed Animation with Callback in AngularJS CSS

Currently working with AngularJS and hoping to receive a notification upon completion of an animation. I am aware that this can be achieved with javascript animations such as myApp.animation(...), but I'm intrigued if there is an alternative method wi ...

javascriptcssangularjsanimation

Adjust the size of a division based on the width of the screen using JavaScript

Is there a way to create a JavaScript function that dynamically adjusts the size of a div, image, or padding based on the screen width without using CSS? I am specifically interested in adjusting the padding of a div element. Here is a sample code snippet ...

javascripthtmlcss

Remove the $(window).resize event handler

Setting up a listener for the browser window, I use this line of code: $(window).resize(resizeObjects); However, during certain points in the web application cycle, I need to remove this event from window.resize. Can anyone provide guidance on how to det ...

jqueryasp.nethtmlajaxwindow-resize

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...

javascripthtml

Open HTML Frameset in a new tab or window

I've been contemplating for the past week on how to address my issue using frameset. Situation: I have an html file for header, footer, menu, and content, each with its own background color. I implemented a frameset for enhanced design. The header ...

htmlcssframeset

The cascading style sheet does not have any effect on the layout of the tables within the

I am trying to apply a CSS style to give all tables on my HTML pages a 1px border width. However, for some reason, the borders are not showing up in my HTML files! What could be causing this issue? <!-- <style type="text/css"> --> body{backg ...

css

Implementing a new row insertion with jQuery/AJAX in PHP combined with a while loop

Here is a jQuery function along with a PHP file: <script> $(document).ready(function(){ $(".book_id_class").click(function(){ $("td:hidden").show(); }); }); </script> <table> <tr> <td class="text-center">Book ID</td> & ...

phpjqueryhtmlajaxjquery-ui

Tips for creating spacing between cards using Bootstrap

I'm having trouble organizing a row of 8 cards into a single line. I set a margin of 2 columns on the left side and each card size to 1, totaling 10. However, my row is all messed up. https://i.sstatic.net/TQOMR.png Here is my current code for the bo ...

htmlcsstwitter-bootstrapbootstrap-4

One approach to animating elements on a web page is by utilizing Node.js

Imagine you want to programmatically define animated movement for elements on a web page. In JavaScript, this can be achieved using techniques outlined in this helpful guide: How TO - JavaScript HTML Animations. But how would you do this in Node.js? UPDAT ...

javascriptjqueryhtmlnode.js

Using two different typefaces to accommodate two distinct languages on a single webpage

Let me clarify my situation. I want to create a platform where users can input text in both Hebrew and English, regardless of the language of the website itself. This means that users could type in Hebrew on an English website and vice versa. My goal is to ...

htmlcsssassmultilingual