欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS計數器重置在HTML中不能正常工作& # 160；桌子

CSS
吉茹定2年前11瀏覽0評論

當遇到CSS計數器重置屬性在HTML表中不能正常工作的問題時，它指的是計數器在表結構中不能按預期重置的問題。這可能會影響表格單元格內所需的編號或計數功能，從而影響內容的預期視覺呈現或組織。

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  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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

移除計數器-重置:項目；來自列表樣式1。 并且，還添加了下面的css:

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

示例:

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  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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

計數器重置屬性在表結構中使用時有限制。默認情況下，計數器的范圍僅限于塊級別，表使用不同的顯示模型。

要解決這個限制并使計數器在表中正確復位，可以結合使用CSS和JavaScript。

嘗試使用下面的代碼:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

在這種情況下，JavaScript代碼被添加到表標記之后。它選擇表體()中的所有表行，并將counterReset style屬性設置為& quotitem & quot對于每一行。這有效地在每一行之前重置計數器，確保每一新行的編號或計數從1開始。

確保將JavaScript代碼放在表格標記之后，這樣它就可以正確地訪問表格元素。