JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <th>col A</th>
    <th>col B</th>
  </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
    <td>ccc</td>
    <td>DDD</td>
  </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>

    <tr>
      <td rowspan="2">BIG</td>
      <td>eee</td>
    </tr>
    <tr>
        <td>fff</td>
    </tr>
    <tr>
       <rd style="display: none;"></rd>
       <rd style="display: none;"></rd>
     </tr>
     <tr>
      <td rowspan="2">BIG</td>
      <td>eee</td>
    </tr>
    <tr>
        <td>fff</td>
    </tr>
    <tr>
       <rd style="display: none;"></rd>
       <rd style="display: none;"></rd>
     </tr>
    

  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
      <td rowspan="2">BIG</td>
      <td>eee</td>
    </tr>
    <tr>
        <td>fff</td>
    </tr>
    <tr>
       <rd style="display: none;"></rd>
       <rd style="display: none;"></rd>
     </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
  </tr>


    <tr>
      <td rowspan="2">BIG</td>
      <td>eee</td>
    </tr>
    <tr>
        <td>fff</td>
    </tr>
     <tr>
       <rd style="display: none;"></rd>
       <rd style="display: none;"></rd>
     </tr>

  
  <tr>
    <td>ccc</td>
    <td>DDD</td>
  </tr>
  <tr>
    <td>ccc</td>
    <td>DDD</td>
  </tr>
</table>

CSS

table {
  width: 50%;
  margin: 20px;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

tr:nth-of-type(even) td {
  background-color: pink;
}

tr:nth-of-type(even) td:only-child {
  background-color: transparent;
}
tr:nth-of-type(odd) td:only-child {
  background-color: pink;
}