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

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

＆＃13;

<!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>

＆＃13;

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

1 个答案: