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

Note that your HTML is invalid. You have a <table> as a child of a <tr> — j08691
– j08691, Commented Jan 22, 2021 at 18:05

flynorc · Accepted Answer · 2021-01-22 18:06:38Z

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>

answered Jan 22, 2021 at 18:06

flynorc

8296 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VADO Over a year ago

oh, I see the nested table needs to be inside a td then, thanks a lot!

Collectives™ on Stack Overflow

Nested table css broken

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related