如何在HTML中制作一个表格，它的所有内容都采用其父容器的确切宽度和高度？

<div id="parentContainer" style="width: 500px; height: 300px;"></div>

<div id="parentContainer" style="width: 500px; height: 300px;">
  <table style="width: 100%; table-layout: fixed;"></table>
</div>

<div id="parentContainer" style="width: 500px; height: 300px;">
  <table style="width: 100%; table-layout: fixed;">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
      </tr>
      <tr>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
    </tbody>
  </table>
</div>