JavaScript 表格滾動

Anika Tabassum Era 2024年2月15日
  1. 使用 JavaScript 中的 overflow 屬性滾動表格
  2. 在 JavaScript 中使用 overflowXoverflowY 滾動表格
JavaScript 表格滾動

對於 web 開發和利用網頁空間,可滾動內容或 div 或 table 可以積極貢獻。一個可滾動的部分可以很容易地節省一大堆行,並且可以重新設計網頁。

我們的示例集將演示 overflow: "auto"overflowX, overflowY 屬性的使用。這些屬性需要更少的程式碼行來實現可滾動的表格內容。

使用 JavaScript 中的 overflow 屬性滾動表格

table 的基本結構提供了大量資料。我們將啟動一個可滾動的表格以最小化空間並利用頁面區域。

我們將設定 tbody 例項屬性 overflowauto。它會自動彈出一個垂直和水平移動的導航器。

程式碼 - HTML 檔案:

<table id="myTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody id="bd">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

程式碼 - CSS 檔案:

thead,
tbody {
  display: block;
}

tbody {
  max-height: 100px;
  width: 200px;
}

程式碼 - JavaScript 檔案:

document.getElementById('bd').style.overflow = 'auto';

輸出:

使用 overflow 屬性滾動表格

在 JavaScript 中使用 overflowXoverflowY 滾動表格

這個例子暗示了一種幾乎類似的方式來執行製作可滾動表格的任務。不同之處在於我們明確定義了軸導航。

我們將設定 overflowXnoneoverflowYauto

程式碼 - HTML 檔案:

<table id="myTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody id="bd">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

程式碼 - CSS 檔案:

thead,
tbody {
  display: block;
}

tbody {
  max-height: 100px;
  width: 200px;
}

程式碼 - JavaScript 檔案:

document.getElementById('bd').style.overflowX = 'none';
document.getElementById('bd').style.overflowX = 'auto';

輸出:

使用 overflowX 和 overflowY 滾動表

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

相關文章 - JavaScript Table