css - 如何使嵌套表格的背景颜色保持在父表格的范围内？

Question

我有一个带有 border-radius: 10px 和 border-spacing: 0px 的父表，它的第一行包含另一个带有 background-color 的表:红色 并且没有border-radius 属性。我得到的返回是一个带尖 Angular 的红色框，而我希望嵌套表格保留在其父表格的边界内。

例子:

#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 以确保子表留在其中。

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