Home/ Questions/Q 6785105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:05:03+00:00

I have some legacy layouts with nested tables. I’d like the parent table’s <td>

  • 0

I have some legacy layouts with nested tables.

I’d like the parent table’s <td>s to have borders of one color, while the inner tables have none.

Here:

<html>
  <head>
    <style>
      table tr td{
    border:none;
      }
      table.listTable tr  td
      {
    border:1px solid red;
      }
    </style>
  </head>
  <body>
    <table class="listTable">
      <tr>
    <td>
      left
    </td>

    <td>
      <table style="width:100%;">
        <tr>
          <td>
        1
          </td>
          <td>
        2
          </td>
        </tr>
      </table>
    </td>

    <td>
      right
    </td>
      </tr>
      <tr>
    <td>
      left
    </td>
    <td>
      doubles
    </td>
    <td>
      right
    </td>
      </tr>
    </table>
  </body>
</html>

How do I get the subcells labeled 1 and 2 in the top middle cell to not have the red CSS applied to them by modifying the .listTable css selector?

This seems like what I want:

table.listTable > tr td

But it breaks the selector entirely.

Could someone explain what selector I need, and also why the selector I’ve tried breaks the layout?

This on jsfiddle: http://jsfiddle.net/nvZbq/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Look at the generated markup in Firebug or other browser dev tool of your choice. You’ll see that <tr>s aren’t actually child elements of <table>s. If you don’t use a <tbody>, the browser will add one for you.

    So here’s the selector to use:

    table.listTable > tbody > tr > td
    • 0