在没有 JS 的情况下调整溢出 div 内的表格大小

Question

当所有列的宽度比包含表格的 div 像素多时，是否可以调整可滚动表格中的列大小。问题是我有 20 列之类的东西，我需要让我的表格可以滚动，并且可以调整列的大小。我使用 JS mousemove、mouseup 和 mousedown 事件成功地做到了，但我试图用 CSS 来做到这一点，它将花费用户更少的资源。示例如下：

<div style="overflow-x:scroll;overflow-y:scroll;max-height:300px;max-width:500px;background-color:gray;">
  <table>
    <thead>
      <tr>
          <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
          <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
          <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
          <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
          <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
          <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TESTTESTESTESTESTSTETSET</td>
        <td>TESTTESTESTESTESTSTETSET</td>
        <td>TESTTESTESTESTESTSTETSET</td>
        <td>TESTTESTESTESTESTSTETSET</td>
        <td>TESTTESTESTESTESTSTETSET</td>
        <td>TESTTESTESTESTESTSTETSET</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

如果这是您要查找的内容，请检查此代码：

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>

<h2>Table which can scroll and column will automatically resize</h2>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>hello</td>
      <td>bye</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Abc</td>
      <td>xyz</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Arun</td>
      <td>Kumar</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>