Zugabe Grenze nur auf die direkte Kind-Tabelle mit einer Klasse

Question

ich Grenze meiner spezifischen Tabelle td hinzufügen möchten, und th so habe ich wie:

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

 
table.borderedtable { 
 
    border-collapse: collapse; 
 
}

<table class='borderedtable'> 
 

 
    <tr> 
 
    <td> 
 
     <table> 
 

 
     <tr> 
 
      <td></td> 
 

 
     </tr> 
 

 
     </table> 
 
    </td> 
 

 
    </tr> 
 

 
</table>

Problem ist die Innenseite Tabelle auch bekommt die Grenze ich möchte die Grenze nur zu td und th unter der Tabelle mit Klasse hinzugefügt werden. Also habe ich versucht, direkte Kind mit > wählen wie unten:

table.borderedtable>tr>td,>tr>th { 
 
    border: 1px solid black; 
 
} 
 

 
table.borderedtable { 
 
    border-collapse: collapse; 
 
}

<table class='borderedtable'> 
 

 
    <tr> 
 
    <td> 
 
     <table> 
 

 
     <tr> 
 
      <td></td> 
 

 
     </tr> 
 

 
     </table> 
 
    </td> 
 

 
    </tr> 
 

 
</table>

Jetzt nicht ich irgendwelche Grenze

Answer 1

Der Browser fügt automatisch ein <tbody> Element innerhalb von Tabellen, so dass die tbody ist die direkte Nachkomme von Ihrem Tisch, nicht tr.

Zum Beispiel die erste td innerhalb einer Tabelle auszuwählen, die Sie dies tun würde:

table.borderedtable>tbody>tr>td { 
    border: 1px solid black; 
} 

Answer 2

table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th { 
    border: 1px solid black; 
} 

table.borderedtable { 
    border-collapse: collapse; 
}