即使两个表的列数相同，也要确保它们的表宽相同

Question

我有两个表，它们的列数不同，它们的总宽度也不同，由于某种原因，我无法修复它。

我尝试更改表格的宽度，但似乎不起作用。即使将它们都设置为100％，表的宽度似乎也取决于列数。

https://jsfiddle.net/rp8yq1vu/

<div style="background-color:black">
  <div style="height: auto; overflow: auto;">
    <div>
      <table style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: auto; font-family: Roboto, sans-serif;">
        <thead style="border-bottom: 1px solid rgb(224, 224, 224);">
          <tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
            <th style="min-width: 20px; max-width: 20px;"></th>
            <th style="min-width: 100px; max-width: 100px;"></th>
            <th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;">1</th>
            <th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;">2</th>
            <th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;">3</th>
            <th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;">4</th>
            <th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;">5</th>
          </tr>
        </thead>
      </table>
    </div>
    <div style="height: inherit; overflow: hidden auto;">
      <table style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: auto; font-family: Roboto, sans-serif;">
        <tbody style="overflow: auto; width: 100%;">
          <tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
            <td style="min-width: 20px; max-width: 20px;">1.</td>
            <td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;">hello<br></td>
            <td style="width: 100%;"></td>
          </tr>
          <tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
            <td style="min-width: 20px; max-width: 20px;">1.</td>
            <td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;">tforty<br></td>
            <td style="width: 100%;"></td>
          </tr>
          <tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
            <td style="min-width: 20px; max-width: 20px;">1.</td>
            <td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;">attitude899<br></td>
            <td style="width: 100%;"></td>
          </tr>
          <tr style="color: rgba(0, 0, 0, 0.87); height: 48px;">
            <td style="min-width: 20px; max-width: 20px;">1.</td>
            <td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;"><img src="https://www.broken.org" width="100" height="100"><br></td>
            <td style="width: 100%;"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我希望两个表都具有相同的宽度并隐藏黑色背景。