Question

带有 th标记的HTML表格的第一行是否为第0行？因为如果我使用

设置表格行

.t01 tr:nth-child(even) {
    color: red;
}

.t01 tr:nth-child(odd) {
    color: white;
}

第一行和第二行的文本颜色均为白色。但第二行应该是红色，因为2是偶数。

Answer 1

您可能需要重置浏览器上的浏览器数据。特别是如果您一直在使用CSS，这可能会导致页面脱落。

Answer 2

是的，确实如此，HTML表的第一行从0开始。

例如：

//我们有一个包含3行的表

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
  </tr>
</table>

我们正在检索第0行

alert(document.getElementById("myTable").rows[0].innerHTML);

输出结果为：

Row1 Cell1

Answer 3

如果没有您的代码，很难提供帮助，它应该可以正常工作。

我的猜测是，您使用的是<thead>和<tbody>，这会导致2个容器中包含<tr>个标记。所以<thead>的第n个孩子是奇数，而<tbody>的第n个孩子也是奇数

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.container div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container p {
  font-size: 8pt;
}

.t01 {
  background-color: #3d3d3d;
}

.t01 tr:nth-child(even) {
  color: red;
}

.t01 tr:nth-child(odd) {
  color: white;
}

.t02 {
  background-color: #3d3d3d;
}

.t02 tr:nth-child(even) {
  color: red;
}

.t02 tr:nth-child(odd) {
  color: white;
}

.t03 {
  background-color: #3d3d3d;
}

.t03 thead tr:first-child {
  color: red;
}

.t03 tbody tr:nth-child(even) {
  color: red;
}

.t03 tbody tr:nth-child(odd) {
  color: white;
}

<div class="container">
  <div>
    <table class="t01">
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
    <p>No &lt;thead&gt; &amp; &lt;tbody&gt;</p>
  </div>
  <div>
    <table class="t02">
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
    <p>With &lt;thead&gt; &amp; &lt;tbody&gt;</p>
  </div>
  <div>
    <table class="t03">
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
    <p>Fix for &lt;thead&gt; &amp; &lt;tbody&gt;</p>
  </div>
</div>

HTML表格的第一行是否标记为第0行？

3 个答案: