Wie kann die Hintergrundfarbe der geschachtelten Tabelle innerhalb der Grenzen der übergeordneten Tabelle bleiben?

Question

Ich habe eine Elterntabelle mit border-radius: 10px und border-spacing: 0px, und seine erste Zeile enthält eine andere Tabelle mit background-color: red und keine border-radius Eigenschaft. Was ich dafür bekomme, ist eine rote Box mit scharfen Ecken, während ich möchte, dass die verschachtelte Tabelle innerhalb der Grenzen ihres Elternteils bleibt.

Beispiel:

#parent { 
 
    border-style: solid; 
 
    border-width: thin; 
 
    border-radius: 10px; 
 
    border-spacing: 0px; 
 
} 
 

 
#child { 
 
    background-color: red 
 
}

<table id="parent"> 
 
    <tbody><tr><td> 
 

 
    <table id="child"> 
 
     <tbody><tr> 
 
      <td>TEST</td> 
 
     </tr></tbody> 
 
    </table> 
 

 
    </td></tr></tbody> 
 
</table>

Wie kann dies ohne erreicht werden border-radius auf der verschachtelten Tabelle neu zu definieren?

Answer 1

overflow:hidden; 

zu der übergeordneten Tabelle hinzufügen. Sie können auch hinzufügen, in border-collapse:collapse; zu ihm.

<table style="border-style:solid; 
 
       border-width:thin; 
 
       border-radius:10px; 
 
       border-spacing:0px; 
 
       overflow: hidden; 
 
       border-collapse: collapse;"> 
 
    <tbody> 
 
    <tr><td> 
 
     <table style="background-color:red"> 
 
     <tbody> 
 
      <tr> 
 
      <td>TEST</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </td></tr> 
 
    </tbody> 
 
</table>

Answer 2

Verwenden Sie overflow: hidden in der übergeordneten Tabelle, um sicherzustellen, dass das Kind darin bleibt.

#parent { 
 
    border-style: solid; 
 
    border-width: thin; 
 
    border-radius: 10px; 
 
    border-spacing: 0px; 
 
    overflow: hidden; 
 
} 
 

 
#child { 
 
    background-color: red 
 
}

<table id="parent"> 
 
    <tbody><tr><td> 
 

 
    <table id="child"> 
 
     <tbody><tr> 
 
      <td>TEST</td> 
 
     </tr></tbody> 
 
    </table> 
 

 
    </td></tr></tbody> 
 
</table>