html - 如何使用 rowspan 为每个交替行着色？

Question

下面是我的表格:

     -----------------------------------
        Sl. No.   :    File No.         :
                  :-----------------------
                  :  Subject1           :
    -------------------------------------
           1.     : 1/2/34-gr           :
                  :----------------------
                  :Nice table           :
----------------------------------------
           2.     : 1/2/34-gr           :
                  :----------------------
                  :Nice table           :
----------------------------------------

等等……

现在我要为每个奇数 Sl 的背景着色。不，但是由于第 2 列有两行，所以我无法通过使用第 n 个偶数来实现它。还可以使用什么其他方法？ (使用 CSS、HTML 或 JS)

Answer 1

您可以使用 CSS :nth-child()伪类选择器。

/* for selecting first row in combined sl*/
table tbody tr:nth-child(4n + 1),
/* for selecting second row in combined sl*/
table tbody tr:nth-child(4n + 2)
{
  background: red
}

table tbody tr:nth-child(4n + 1),
table tbody tr:nth-child(4n + 2)
{
  background: red
}

<table border=1>
  <thead>
      <tr>
        <td rowspan=2>Sl No</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan=2>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan=2>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan=2>3</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan=2>4</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan=2>5</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>