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

Question

I have a parent table with border-radius: 10px and border-spacing: 0px, and its first row contains another table with background-color: red and no border-radius property. What I get in return is a red box with sharp corners, whereas I want the nested table to stay within the borders of its parent.

Example:

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

How can this be accomplished without having to re-define border-radius on the nested table?

Answer 1

Add

overflow:hidden;

to the parent table. You might also want to add in border-collapse:collapse; to it.

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