How to color every alternate row with rowspan?

Question

Below is my table:

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

and so on.......

Now I want color the background of every odd Sl. No., but since the 2nd column has two rows, I can't achieved it by using n-th even. What other method can be used? (using CSS,HTML or JS)

Possible duplicate of [Alternate table row color using CSS?](https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css) — Ikari, Mar 21 '18 at 07:39

Pranav C Balan · Answer 1 · 2018-03-20T05:23:29.110

You can use CSS :nth-child() pseudo-class selector.

/* 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>

co0kie · Answer 2 · 2018-03-20T05:29:08.867

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

<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>

If your markup is like this:

<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>

then this CSS will work

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

score 0 · Answer 3 · answered Mar 20 '18 at 05:31

Why not you just take another Table inside column ?

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

<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>

score 0 · Answer 4 · answered Mar 20 '18 at 06:47

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

<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>

How to color every alternate row with rowspan?

4 Answers4