Question

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在不必在嵌套表上重新定义border-radius的情况下实现这一目标？

Answer 1

在父表上使用overflow: hidden以确保子项保留在其中。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

添加

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>

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

2 个答案: