js table宽度自适应

<div class="table-container">
  <table id="myTable">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</div>

.table-container {
  overflow-x: auto; /* 允许水平滚动 */
}

#myTable {
  width: 100%;
  border-collapse: collapse;
}

#myTable th, #myTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

function adjustTableWidth() {
  const table = document.getElementById('myTable');
  const container = table.parentElement;
  table.style.width = `${container.clientWidth}px`;
}

window.addEventListener('resize', adjustTableWidth);
document.addEventListener('DOMContentLoaded', adjustTableWidth);