Question

我想在表格中添加水平滚动条。但是，用户可以向表中添加行，因此其宽度必须更改。一行是100px宽度所以有10行，我的表的宽度为1000px，但包含表的div只有800px宽度。如果表格的宽度大于表格中水平滚动条的div宽度，我想要。

<div style="width:800px;overflow:auto;">
    <table>...</table>
</div>

你知道怎么做吗？

Answer 1

您可以通过添加overflow-x:scroll来完成此操作，并且x轴上始终会有一个滚动条。

Answer 2

将overflow: auto;添加到您的div，并为您的表格提供固定宽度+ overflow-x: scroll;。

看看：

div {
  overflow: auto;
}

table {
  overflow-x: scroll;
  width: 800px;
}

th, td {
  width: 100px;
}

<div>
    <table>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
    </table>
</div>

Answer 3

我放在div容器上

overflow-x: auto;
white-space: nowrap;

以及div和表格：

width: -moz-available;
width: -webkit-fill-available;

简化的html：

<div class="container">
    <table>...</table>
</div>

我在同一页上有几张桌子，其中一张比全宽要窄，因此要张开。另一个则更宽，因此将显示为容器的整个宽度，并具有水平滚动条。

Answer 4

试试这段代码

＆＃13;

div {
  overflow-x: auto;
  width: 800px;
}

＆＃13;

<div>
  <table border="1">
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>

  </table>
</div>

＆＃13;

如何将水平滚动条添加到宽度不固定的表格？

4 个答案: