Php - CSS counter-reset not working properly in HTML table

SirinJh
June 13, 2023
255 views
1 vote
2 Answers

When encountering the issue of the CSS counter-reset property not functioning correctly in an HTML table, it refers to a problem where the counter fails to reset as expected within the table structure. This can impact the desired numbering or counting functionality within the table cells, affecting the intended visual presentation or organization of the content.

ol.list-style-1 {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  margin: 10px 0px;
  padding-left: 40px;
  counter-reset: item;
}

ol.list-style-1>li {
  margin-bottom: 15px;
  list-style: none;
  position: relative;
}

ol.list-style-1 li:last-child {
  margin-bottom: 0;
}

ol.list-style-1>li:before {
  content: counters(item, ".") ".";
  counter-increment: item;
  color: #000;
  position: absolute;
  top: 0;
  left: -30px;
}

ol.list-style-1>li ol {
  margin-top: 10px;
}

ol.list-style-1>li ol li::before {
  left: -30px;
}

ol.list-style-1>li a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

ol.list-style-1>li a:hover {
  color: #4d489e;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div class="p-4">
  <ol class="list-style-1">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>In malesuada pellentesque risus, at pulvinar justo efficitur non.</li>
    <li>Morbi fermentum cursus magna, a pretium eros dignissim non.</li>
  </ol>

  <div class="table-responsive mt-4" style="width:600px;">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Module 1</th>
          <th>Module 2</th>
          <th>Module 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <ol class="list-style-1">
              <li>Lorem ipsum.</li>
              <li>consectetur elit.</li>
            </ol>
          </td>
          <td>
            <ol class="list-style-1">
              <li>Sed cursus magna.</li>
              <li>Lorem ipsum.</li>
              <li>In malesuada.</li>
              <li>Morbi magna.</li>
            </ol>
          </td>
          <td>
            <ol class="list-style-1">
              <li>Adipiscing elit.</li>
              <li>At non.</li>
              <li>Morbi magnan.</li>
            </ol>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

CSS counter-reset not working properly in HTML table

Please help to reset the counter for each list.

CSS counter-reset issue solved for HTML table

Answers

Remove counter-reset: item; from list-style-1.
And, also add the below css:

ol.list-style-1 > li:first-of-type {
  counter-reset: item;
}

Example:

ol.list-style-1 {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    margin: 10px 0px;
    padding-left: 40px;
}
ol.list-style-1 > li:first-of-type {
  counter-reset: item;
}
ol.list-style-1>li {
    margin-bottom: 15px;
    list-style: none;
    position: relative;
}
ol.list-style-1 li:last-child {
    margin-bottom: 0;
}
ol.list-style-1>li:before {
    content: counters(item, ".") ".";
    counter-increment: item;
    color: #000;
    position: absolute;
    top: 0;
    left: -30px;
}
ol.list-style-1>li ol {
    margin-top: 10px;
}
ol.list-style-1>li ol li::before {
    left: -30px;
}
ol.list-style-1>li a {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
ol.list-style-1>li a:hover {
    color: #4d489e;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>

    <div class="p-4">
        <ol class="list-style-1">
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>In malesuada pellentesque risus, at pulvinar justo efficitur non.</li>
            <li>Morbi fermentum cursus magna, a pretium eros dignissim non.</li>
        </ol>

        <div class="table-responsive mt-4" style="width:600px;">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Module 1</th>
                        <th>Module 2</th>
                        <th>Module 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <ol class="list-style-1">
                                <li>Lorem ipsum.</li>
                                <li>consectetur elit.</li>
                            </ol>
                        </td>
                        <td>
                            <ol class="list-style-1">
                                <li>Sed cursus magna.</li>
                                <li>Lorem ipsum.</li>
                                <li>In malesuada.</li>
                                <li>Morbi magna.</li>
                            </ol>
                        </td>
                        <td>
                            <ol class="list-style-1">
                                <li>Adipiscing elit.</li>
                                <li>At non.</li>
                                <li>Morbi magnan.</li>
                            </ol>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

The counter-reset property has limitations when used within a table structure. By default, the scope of counters is limited to the block level, and tables use a different display model.

To fix this limitation and make the counters reset properly within the table, you can use a combination of CSS and JavaScript.

Try with this below code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="p-4">
  <ol class="list-style-1">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>In malesuada pellentesque risus, at pulvinar justo efficitur non.</li>
    <li>Morbi fermentum cursus magna, a pretium eros dignissim non.</li>
  </ol>

  <div class="table-responsive mt-4" style="width:600px;">
    <table class="table table-bordered" id="customTable">
      <thead>
        <tr>
          <th>Module 1</th>
          <th>Module 2</th>
          <th>Module 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <ol class="list-style-1">
              <li>Lorem ipsum.</li>
              <li>consectetur elit.</li>
            </ol>
          </td>
          <td>
            <ol class="list-style-1">
              <li>Sed cursus magna.</li>
              <li>Lorem ipsum.</li>
              <li>In malesuada.</li>
              <li>Morbi magna.</li>
            </ol>
          </td>
          <td>
            <ol class="list-style-1">
              <li>Adipiscing elit.</li>
              <li>At non.</li>
              <li>Morbi magnan.</li>
            </ol>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
  // Reset counters for each table row
  var rows = document.querySelectorAll("#customTable tbody tr");
  for (var i = 0; i < rows.length; i++) {
    rows[i].style.counterReset = "item";
  }
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

In this, JavaScript code is added after the table markup. It selects all the table rows within the table body () and sets the counterReset style property to "item" for each row. This effectively resets the counter before each row, ensuring that the numbering or counting starts from 1 for each new row.

Make sure to place the JavaScript code after the table markup, so it can access the table elements correctly.

Please signup or login to give your own answer.

Click here to cancel reply.

Php – CSS counter-reset not working properly in HTML table

Answers