始終在視圖中保持水平表格滾動條

我的網頁上有一個表格，對于低解析度，它有一個水平滾動條。但是，滾動條固定在表格的底部，并且有很多條目，因此總是向下滾動，向左/向右滾動并再次滾動回我們所在的位置有點不必要。

我的表格 CSS 看起來像這樣：

th,
td {
    white-space: nowrap;
}
table {
    table-layout: auto;
}

如果表格底部不在視野范圍內，如何讓滾動條始終出現在螢屏底部？我發現的大多數問題更像是“如何始終顯示滾動條，即使不需要它”，但仍然只在表格底部。

提前致謝！

uj5u.com熱心網友回復：

您寧愿將您的表格包裝在一個帶有overflow:auto屬性的 div 中，并確保此容器的底部邊緣永遠不會離開視口。

在此示例中，桌子環繞的最大高度為 80vh。

body {
  font-size: 1em;
  font-family: 'Segoe UI';
  margin: 1em;
}

.main {
  display: flex;
  flex-direction: column;
  height: 80vh;
  resize: both;
  position: relative;
  overflow: auto;
  border: 1px solid red;
  padding:0 1em 1em 0;
}

.main:after {
content: '';
display:block;
border: 1em solid #eee;
border-top-color: transparent;
border-left-color: transparent;
position:absolute;
bottom:0;
right:0;
}

table {
  border-collapse: collapse;
  white-space: nowrap;
}

th {
  background-color: #eee;
}

thead {
  position: sticky;
  top: 0
}

th,
td {
  vertical-align: top;
  text-align: left;
  padding-right: 0.3em;
  border-bottom: 1px solid #000;
  border-right: 4px solid #fff;
}

.table-wrp {
  position: relative;
  overflow: auto;
  padding: 0 1em 1em 0;
}

<div class="main">
  <div class="table-wrp">
    <table>
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td>Knocky</td>
          <td>Flor</td>
          <td>Ella</td>
          <td>Juan</td>
        </tr>
        <tr>
          <td>Breed</td>
          <td>Jack Russell</td>
          <td>Poodle</td>
          <td>Streetdog</td>
          <td>Cocker Spaniel</td>
        </tr>
        <tr>
          <td>Age</td>
          <td>16</td>
          <td>9</td>
          <td>10</td>
          <td>5</td>
        </tr>
        <tr>
          <td>Owner</td>
          <td>Mother-in-law</td>
          <td>Me</td>
          <td>Me</td>
          <td>Sister-in-law</td>
        </tr>
        <tr>
          <td>Eating Habits</td>
          <td>Eats everyone's leftovers</td>
          <td>Nibbles at food</td>
          <td>Hearty eater</td>
          <td>Will eat till he explodes</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>Knocky</td>
          <td>Flor</td>
          <td>Ella</td>
          <td>Juan</td>
        </tr>
        <tr>
          <td>Breed</td>
          <td>Jack Russell</td>
          <td>Poodle</td>
          <td>Streetdog</td>
          <td>Cocker Spaniel</td>
        </tr>
        <tr>
          <td>Age</td>
          <td>16</td>
          <td>9</td>
          <td>10</td>
          <td>5</td>
        </tr>
        <tr>
          <td>Owner</td>
          <td>Mother-in-law</td>
          <td>Me</td>
          <td>Me</td>
          <td>Sister-in-law</td>
        </tr>
        <tr>
          <td>Eating Habits</td>
          <td>Eats everyone's leftovers</td>
          <td>Nibbles at food</td>
          <td>Hearty eater</td>
          <td>Will eat till he explodes</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>Knocky</td>
          <td>Flor</td>
          <td>Ella</td>
          <td>Juan</td>
        </tr>
        <tr>
          <td>Breed</td>
          <td>Jack Russell</td>
          <td>Poodle</td>
          <td>Streetdog</td>
          <td>Cocker Spaniel</td>
        </tr>
        <tr>
          <td>Age</td>
          <td>16</td>
          <td>9</td>
          <td>10</td>
          <td>5</td>
        </tr>
        <tr>
          <td>Owner</td>
          <td>Mother-in-law</td>
          <td>Me</td>
          <td>Me</td>
          <td>Sister-in-law</td>
        </tr>
        <tr>
          <td>Eating Habits</td>
          <td>Eats everyone's leftovers</td>
          <td>Nibbles at food</td>
          <td>Hearty eater</td>
          <td>Will eat till he explodes</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

uj5u.com熱心網友回復：

嘗試這個 ：

table {
    overflow: auto;
}

或者

table {
    overflow: scroll;
}

uj5u.com熱心網友回復：

您可以為此使用浮動滾動jquery 插件。

標籤：html css 网络

上一篇：無法將元素固定在頁面角落（博主“簡單”模板）

下一篇：如何讓div占據整個螢屏底部？