如何用rowspan为每个备用行着色？

Question

以下是我的表格：

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

依旧.......

现在我想要颜色是每个奇数Sl的背景。不，但是由于第二列有两行，我使用第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>

Answer 2

＆＃13;

＆＃13;

tr tr:nth-child(odd) {
  background-color: red;
}

＆＃13;

<table>
  <tr>
    <td colspan="2">
      SL. No.
    </td>
    <td>
      <table>
        <tr>
          <td>Fil No.</td>
        </tr>
        <tr>
          <td>Subject 1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      1
    </td>
    <td>
      <table>
        <tr>
          <td>1/2/34-gr  </td>
        </tr>
        <tr>
          <td>Nice table   </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      2
    </td>
    <td>
      <table>
        <tr>
          <td>1/2/34-gr </td>
        </tr>
        <tr>
          <td>Nice table</td>
        </tr>
      </table>
    </td>
  </tr>
  </table>

＆＃13;

＆＃13;

＆＃13;

如果你的标记是这样的：

<table>
  <tr>
    <td colspan="2">
      SL. No.
    </td>
    <td>
      <table>
        <tr>
          <td>Fil No.</td>
        </tr>
        <tr>
          <td>Subject 1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      1
    </td>
    <td>
      <table>
        <tr>
          <td>1/2/34-gr  </td>
        </tr>
        <tr>
          <td>Nice table   </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      2
    </td>
    <td>
      <table>
        <tr>
          <td>1/2/34-gr </td>
        </tr>
        <tr>
          <td>Nice table</td>
        </tr>
      </table>
    </td>
  </tr>
  </table>

然后这个CSS将起作用

tr tr:nth-child(odd) {
  background-color: red;
}

Answer 3

为什么不在列中选择另一个表？

＆＃13;

＆＃13;

table tr:nth-child(even) td{
  background-color: red
}
/*callback*/
table tr:nth-child(odd) td {
  background-color: transparent;
}

＆＃13;

<table border=1>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <!--Another Table-->
      <table>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>1</td>
  </tr>
  <tr>
    <td>4</td>
    <td>
      <!--Another Table-->
      <table>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>5</td>
    <td>
      <!--Another Table-->
      <table>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

table tr:nth-child(even) td{
  background-color: #ccc
}
table tr:nth-child(odd) td {
  background-color: #ggg;
}

＆＃13;

<table border=1>
  <tr>
    <td>Sl. No.</td>
    <td>
      <table>
        <tr><td>File No.</td></tr>
        <tr><td>Subject1</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>1.</td>
    <td>
      <table>
        <tr><td>1/2/34-gr</td></tr>
        <tr><td>Nice table</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>2.</td>
    <td>
      <table>
        <tr><td>1/2/34-gr</td></tr>
        <tr><td>Nice table</td></tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;