Nested table css broken

Question

I have a nested table but for some reason, the CSS selector seems broken after the nested table.

.yellow {
  background-color: yellow;
}

<table>
  <tr class="yellow">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>
      <table>
        <tr>
          <td>4</td>
        </tr>
      </table>
      <td/>
  </tr>
  <tr>
    <table>
      <tr class="yellow">
        <td>
          5
        </td>
      </tr>
    </table>
  </tr>
  <tr class="yellow">
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

https://jsbin.com/zuxagenoba/edit?html,css,output

Answer 1

the issue is that your nested table (the one which contains 5) is a direct child of tr element and you have a missing td element. Wrapping that table with and fixes the issue. See code snippet below

.yellow {
  background-color: yellow;
}

<table>
  <tr class="yellow">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>
      <table>
        <tr>
          <td>4</td>
        </tr>
      </table>
      <td/>
  </tr>
  <tr>
    <td>
    <table>
      <tr class="yellow">
        <td>
          5
        </td>
      </tr>
    </table>
  </td>
  </tr>
  <tr class="yellow">
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>