如何使嵌套 table 的背景颜色保持在父 table 的范围内？

Question

我有一个父项 table，有 border-radius: 10px 和 border-spacing: 0px，它的第一行包含另一个 table，有 background-color: red，没有 border-radius 属性。我在 return 中得到的是一个带有尖角的红色框，而我希望嵌套的 table 保留在其父项的边界内。

示例：

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

如何在不在嵌套 table 上重新定义 border-radius 的情况下完成此操作？

Answer 1

对父项 table 使用 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>

Answer 2

添加

overflow:hidden;

到parent table。您可能还想在其中添加 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>

如何使嵌套 table 的背景颜色保持在父 table 的范围内？

How to make background color of nested table stay within bounds of parent table?

css

border

background-color

nested-table