CODEWITHSUNDEEP
htmlcss
Laishram Pilot
Laishram Pilot

Reputation: 49

How to color every alternate row with rowspan?

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)

Upvotes: 3

Views: 3084

Answers (4)

user8823283
user8823283

Reputation: 

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>

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6807

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>

Upvotes: 0

co0kie
co0kie

Reputation: 59

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

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

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>

Upvotes: 8

Related Questions