Increasing the count automatically in a database table

I've successfully implemented auto-numbered lines in a table using the following CSS:

/* Set the Serial counter to 0 */
{ counter-reset: Serial;  }

/* Set the serial number counter to 0 */

.css-serial {
  counter-reset: serial-number; }

/* Increment the serial number counter */
.css-serial td:first-child:before {
  counter-increment: serial-number;
  /* Display the counter */  
  content: counter(serial-number); }

<a href="http://www.phoenixcomm.net/~harrison/tmp/questions/Code1.207-05-16.html">Link to my table code</a><br>
<img src="https://i.sstatic.net/NNL2n.png"></a><br>

The numbering works perfectly, but I encounter an issue when it comes to one of the separators, as seen in items #7 and #10. How can I prevent it from numbering the separator?

<tr><_td colspan=2><HR 30%></td></tr> 

Answer №1

Without complete information provided above, it's a bit of guesswork. Assuming that the underscore is actually a typo, here is a possible solution:

.css-serial td:not([colspan="2"]):first-child::before {
  counter-increment: serial-number;
  content: counter(serial-number); 
}

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 are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

I have a sandbox from Material UI that you can view at this link: https://codesandbox.io/s/material-demo-forked-c8e39?file=/demo.js Upon loading the page, an iframe displays some HTML content. Although the width fits perfectly, there are two vertical scro ...

"Oops! Looks like the file type is nowhere to be found

Recently, I encountered an issue with uploading a CSV file to my page and inserting its contents into a MySQL database using PHP. While this process has been smooth sailing in the past, today I faced a problem where the uploaded file had no associated file ...

jQuery doesn't just insert values; it neatly organizes them in a perfect line

Hey there, I have a bit of a silly question, but I could really use some help! I'm facing an issue with changing the height of a div using jQuery by adding values. Instead of adding up, they are just lining up one after another. Wondering if anyone e ...

JQuery HTML form validation continues to send emails even when there are blank entries

I've set up an HTML form with three required fields, and I'm trying to prevent the form from submitting an AJAX call if those fields are left empty. $("#contact").submit(function(e){ e.preventDefault(); var ajaxurl = '<?php echo ...

Execute a standalone haml page within a local rails application

Currently engaged in development of a Rails application, I find myself facing the challenge of updating outdated pages from a common library that is integrated into the app via a gem. These pages are rendered in Haml using YAML files. My task at hand invo ...

Element in the iterator is lacking a "key" prop

import React from 'react' import { motion } from "framer-motion" type Props = {} export default function Projects({}: Props) { const projects = [1,2]; return ( <motion.div initial={{ opacity: 0 }} whileInVie ...

An issue in HTML where only one div is displayed at a time when hovering over another div

I have a section in HTML that is divided into two parts. In one section, I am listing some points and in the other, I am displaying their corresponding sentence on hover. Here is how I implemented it: .showme { display: none; } .single-fun-fact:hover~. ...

Creating shapes in HTML using CSS with cross-browser compatibilityORCrafting shapes in HTML

Does anyone know the best way to create a unique shape in HTML using CSS? I'm looking for solutions similar to this example: https://i.sstatic.net/icGI5.png Thank you! ...

Align all elements to the center and arrange them in a vertical column

I have implemented a form using Bootstrap 4 and here is the code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eaf2ec">[email protected]</a&g ...

Reasons why text does not show color when a style element is applied

I attempted to include a color and font family within an H1 tag using style, but unfortunately it did not work as expected. The color property had no effect on my current line of text. <h1 align="center" style="font-family: Arial, Helvetica, sans-serif ...

What is the best method to create a transparent first row and all columns using css?

Is there a way to implement this design using HTML and CSS? https://i.sstatic.net/RjD6l.jpg Keep in mind that the first row and columns in the first row should be transparent. ...

Using Selenium to locate and click on a hyperlink within a table by identifying it with its displayed name

In my case, I have a table that displays records of school districts. My goal is to use Selenium in order to select the delete icon positioned in the eighth td for the district located on a row with a specific name. In this scenario, the name being QA__run ...

Guide to displaying or hiding elements based on the number of selected checkboxes

When only one checkbox is checked, all buttons in the head-btn class should be displayed. By default, only the add folder and upload buttons are shown. If a user selects two checkboxes, the share button should be hidden. If they uncheck one of the checkbo ...

Adjust the content column in the form to be mobile-friendly

Currently, I am coding in PHP and using Bootstrap. In my project, there are two columns - the LEFT column displays text, while the RIGHT column contains a form: Presently, when viewing on desktop, both columns are visible. However, on mobile devices, ...

What is the best method for deleting the div with id "__next" in Next.js?

I'm currently working on a website using Next.js and I'm aiming to create a header with a position: sticky; effect. Nevertheless, Next.js automatically inserts a div with the attribute id="__next" at the top of my website without my co ...

Place the blockquote in the middle, but maintain the text's alignment to

I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap). To see the full code, take a ...

changing pictures with jquery

Struggling with this code snippet: $('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow"); $('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow"); No matter which ...

What causes absolute positioning to separate each word onto its own line? Is there a solution to this issue?

Why does each word in a child element (class .second) get wrapped onto a new line when using absolute positioning? Is there a way to keep the parent element (class .first) as a round shape, while also ensuring the child element is centered below it and has ...

Designing unique icons through image manipulation in CSS

I am currently experimenting with creating an icon that functions similar to font-awesome. When I apply a specific class, it should display an image based on the font size. Surprisingly, I got it to work in Chrome but for some reason, the same code doesn&a ...

Ways to display a GIF image as a pop-up during data loading in an MVC application

I am working on a project using the MVC framework. The application retrieves a large amount of data during loading. I would like to display a loading image - a .gif file while fetching records. Below is the code snippet I am currently using: //Loads rec ...