html - 如何在表格溢出时添加水平滚动？

Question

仅当表格溢出时，我才尝试在表格上添加水平滚动。桌子

.display {
  width: 100%;
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
}

<table class="display">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Date Time</th>
      <th>Details</th>
      <th>Details_1</th>
      <th>Details_2</th>
      <th>Details_3</th>
      <th>Details_4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>53</td>
      <td>Jenny</td>
      <td>2009/10/09</td>
      <td>Developer</td>
      <td>Developer_1</td>
      <td>Developer_2</td>
      <td>Developer_3</td>
      <td>Developer_4</td>
    </tr>
  </tbody>
</table>

但是，我面临一个问题。当列减少时，水平滚动仍然存在，表格的宽度也减小。我只想在表格溢出时添加滚动。

标签： htmlcss

Answer 1

请在您的 CSS 中添加另一个溢出作为“自动”。

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

希望它对你有用。