如何使我的可滚动表格窗口宽度达到100%？

<div class="table-container">
  <table>
    <colgroup>
      <col style="width: 20%;">
      <col style="width: 30%;">
      <col style="width: 50%;">
    </colgroup>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  table-layout: fixed;
  white-space: nowrap;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}