Tracking the number of headings within a table using HTML

I am having trouble formatting text in a table where the second column contains text, with some rows having headings ranging from H1 to H5. I want to use auto numbering for the headings, but the increment function doesn't seem to be working within the table.

The issue is that the counter for H2 level is not increasing and it always shows as 1.1 for the heading number.

Can someone please help me identify the problem?

body {
  counter-reset: h1counter;
}

h1 {
  counter-reset: h2counter;
}

h2 {
  counter-reset: h3counter;
}

h1:before {
  counter-increment: h1counter;
  content: counter(h1counter) ". ";
}

h2:before {
  counter-increment: h2counter;
  content: counter(h1counter) "."counter(h2counter) ". ";
}

h3:before {
  counter-increment: h3counter;
  content: counter(h1counter) "."counter(h2counter) "."counter(h3counter) ". ";
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <h1>Heading 1</h1>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <h2>Heading 1.1</h2>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <h2>Heading 1.2</h2>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <h1>Heading 2.</h1>
      </td>
    </tr>
  </tbody>
</table>

htmlcsscss-counter

Answer №1

Solution #1. A possible solution to this problem involves utilizing the CSS property counter-set. See example below:

body {
  counter-reset: h1counter h2counter h3counter;
}

body h1 {
  counter-set: h2counter 0;
}

body h2 {
  counter-set: h3counter 0;
}

h1:before {
  counter-increment: h1counter;
  content: counter(h1counter) ". ";
}

h2:before {
  counter-increment: h2counter;
  content: counter(h1counter) "."counter(h2counter) ". ";
}

h3:before {
  counter-reset: h3counter;

  counter-increment: h3counter;
  content: counter(h1counter) "."counter(h2counter) "."counter(h3counter) ". ";
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <h1>Heading 1</h1>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <h2>Heading 1.1</h2>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <h2>Heading 1.2</h2>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <h1>Heading 2.</h1>
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td>
        <h2>Heading 2.1</h2>
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>
        <h2>Heading 2.2</h2>
      </td>
    </tr>
  </tbody>
</table>

Keep in mind that the counter-set property is relatively new and may not be supported by all browsers, particularly Safari.

Solution #2. Another approach to tackling this issue involves using JavaScript along with data attributes. Example provided below:

let h1Counter = 0,
  h2Counter = 0,
  h3Counter = 0;

document.querySelectorAll('h1, h2, h3').forEach((el) => {
  if (el.matches('h1')) {
    h1Counter++;
    h2Counter = 0;
    el.dataset.counter = `${h1Counter}`;
  } else if (el.matches('h2')) {
    h2Counter++;
    h3Counter = 0;
    el.dataset.counter = `${h1Counter}.${h2Counter}`;
  } else { // h3
    h3Counter++;
    el.dataset.counter = `${h1Counter}.${h2Counter}. ${h3Counter}`;
  }
})
h1:before,
h2:before,
h3:before {
  content: attr(data-counter) ". ";
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <h1>Heading 1</h1>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <h2>Heading 1.1</h2>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <h2>Heading 1.2</h2>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <h1>Heading 2.</h1>
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td>
        <h2>Heading 2.1</h2>
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>
        <h2>Heading 2.2</h2>
      </td>
    </tr>
  </tbody>
</table>

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

Passing information from the created hook to the mounted hook in VueJS

How can I transfer data from the created function to the mounted function in VueJS? In my VueJS application, the code in my created function is as follows: created: function(){ $.getJSON({ url: 'static/timeline.json', success:function( ...

javascripthtmljsonvue.jsvuejs2

How to apply unique styles to multiple elements with the same class using jQuery?

How can I add different classes to multiple div elements with the same class based on their content? <div class = "flag"> Yes </div> <div class = "flag"> No </div> <div class = "flag"> Yes </div> <div class = "flag"& ...

javascripthtmljquerycss

Insert a design layout into a text entry box

Currently developing an application with AngularJS and seeking a solution for adding a "template" to an HTML input field similar to a placeholder. Specifically, I have a date-field requiring user input in the format of dd/MM/yyyy or through a datepicker se ...

javascripthtmlangularjsangularjs-directive

What is preventing my image from moving upwards?

I've been struggling to move this image up, despite trying several methods. I really want it to be aligned horizontally with the PV picture. I need the HP image to be moved directly upwards so that it aligns horizontally with the PV image. This is t ...

htmlimagecss

Is there a way I can obtain the code for a message box?

When I refer to a message box, I am talking about a container that gives users the ability to input their text and access different features like BOLD, ITALIC, color, justify, etc., in order to customize their message's appearance! (Think of it as the ...

javascriptphphtml

Challenges with Implementing Background Images on my Website with HTML and CSS

Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I ...

htmlcss

The footer row in jqgrid is experiencing issues with functionality

I am trying to create a jqgrid table with three footer rows to display a total at the end of each grid. Following the guidance in this helpful post from Oleg on How to create two footer rows in jqgrid, I was able to modify the code provided to show three t ...

jqueryhtmlcssjqgridsalesforce

Modifying a CSS property with jQuery

If I have the following HTML, how can I dynamically adjust the width of all "thinger" divs? ... <div class="thinger">...</div> <div class="thinger">...</div> <div class="thinger">...</div> ... One way to do this is usi ...

javascriptjquerycss

What would you name this particular element?

I want to create a unique slider design but I'm unsure where to begin or how to search for information because I don't know the correct terminology. Does this type of slider have a specific name? I heard about Marquee, but that seems like someth ...

javascripthtmlcssweb

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

I successfully implemented a modal popup in my project, but encountered an issue where the popup moves to the left side if clicked multiple times. Despite searching extensively online, I have not been able to find a solution to this problem. Below is the ...

javascriptjqueryhtmlcss

Eliminating Google Adsense from Blog Posts

In each of my posts, I manually insert one Adsense unit. Here is the code: <div id="toppostad" style="float: left"> Adsense code </div> Initially, I assigned an id to the div when placing the code with the intention of using display:none; to ...

htmlcssbloggeradsense

Tips for making a div expand to take up the available space on the left side of a taller div

Could you take a look at the scenario below? I'm attempting to position my yellow div beneath the red div and on the left side of the lower part of the green div. When I apply clear: left, it moves down but leaves empty space above it. Is there a way ...

htmlcsspositioningfloating

AngularJS: ng-show causing flickering issue upon page refresh

Recently, I encountered an issue with my code snippet: <body> <ng-view></ng-view> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/ ...

javascripthtmlcssangularjs

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

In a function I'm working on, I need to retrieve the specific text within a p element when its parent (.photoBackground) is clicked. The purpose of this operation is to grab the caption for a gallery, where there are multiple p elements with the same ...

jqueryhtmlcss

A blank screen of errors pops up when attempting to update through a form

Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated.https://i.sstatic.net/daavn.pn ...

javascriptpythonhtmlcssdjango

What is the best way to create a three-column layout that completely fills the width of a page, utilizing pixel measurements on two of the columns

Click here for the jsFiddle link: Is it possible to make div2 and Button2 fill the remaining width of the window while using pixel measurements on columns 1 and 3? This formatting will be applied to a form where a textbox needs to adjust its size based o ...

csshtml

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name: I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during ...

javascripthtmlcssvue.js

Can I use Ems instead of pixels for Chrome developer tools?

In all my style-sheets, I opt for using ems instead of px. However, in Chrome Developer Tools, the computed styles/metrics always display in px, even for elements where I specifically used ems: (Here is a screenshot of the computed lengths for a button wi ...

cssgoogle-chrome-devtoolsunits-of-measurement

What is the best way to implement slug URLs in Django?

Hello there! I'm a beginner when it comes to working with Django and currently, I am in the process of creating a website. On the admin page located at , I have added two posts - each one having its own unique slug. The first post's slug is &apo ...

pythonhtmldjangourlslug

Place the two buttons in position

I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. ...

htmlcss