ネストした表の背景色を親表の境界内にとどめる方法はありますか？

Question

私はborder-radius: 10pxとborder-spacing: 0pxの親テーブルを持っており、その最初の行にはbackground-color: redとborder-radiusという特性を持つ別のテーブルが含まれています。私が返すのは、鋭い角を持つ赤いボックスですが、ネストしたテーブルは親の境界内にとどめておきます。

例：

#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>

方法は、これは、ネストされたテーブルの上にborder-radiusを再定義することなく行うことができますか？

Answer 1

親テーブルに

overflow:hidden; 

を追加します。また、border-collapse:collapse;を追加することもできます。

<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

親テーブルにoverflow: hiddenを使用して、子がその内部に留まっていることを確認してください。

#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>