CSS Paged Table

一、概述

CSS Paged Table 是一個基於純 CSS 的分頁表格，它可以輕鬆地將長表格拆分成多個頁面，實現更好的數據展示。該組件使用 CSS3 屬性實現，無需任何 JavaScript 操作。

為了實現分頁效果，CSS Paged Table 依賴 CSS3 的 @media 規則和 page-break 屬性，這些屬性可以在不同設備上生成不同的頁面，並在滿足條件時強制對單元格進行分頁。

二、代碼示例

下面是 CSS Paged Table 的基本代碼示例：

<table class="paged-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Company</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>ABC Inc.</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td>XYZ Corp.</td>
      <td>555-5678</td>
    </tr>
    <!-- more rows here -->
  </tbody>
</table>

三、CSS

CSS Paged Table 的樣式由兩部分組成，一是將表格橫向滾動，使其適應任何設備的寬度，二是使用 CSS3 屬性將表格拆分成多個頁面。

1. 表格橫向滾動

為了實現表格的橫向滾動，需要對表格進行以下 CSS 樣式設置：

table.paged-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  overflow-x: auto;
}

.paged-table thead th {
  background-color: #333;
  color: #fff;
  font-weight: bold;
  height: 50px;
  text-align: left;
  text-overflow: ellipsis;
  border: solid 1px #ccc;
  border-top: none;
  border-bottom: 2px solid #ccc;
  padding: 0 10px;
  vertical-align: middle;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.paged-table tbody td {
  border: solid 1px #ccc;
  border-top: none;
  padding: 10px;
  vertical-align: top;
  text-overflow: ellipsis;
}

2. 使用 CSS3 屬性將表格拆分成多個頁面

為了在不同設備上生成不同的頁面，CSS Paged Table 使用 @media 規則和 page-break 屬性將表格拆分成多個頁面，具體樣式如下：

@media print {
  .paged-table tbody tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}

四、使用

使用 CSS Paged Table 只需要在表格的 class 屬性中添加 paged-table 類名即可：

<table class="paged-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Company</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>ABC Inc.</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td>XYZ Corp.</td>
      <td>555-5678</td>
    </tr>
    <!-- more rows here -->
  </tbody>
</table>

五、總結

CSS Paged Table 是一個基於純 CSS 的分頁表格，它使用 CSS3 屬性實現，不需要任何 JavaScript 操作。使用 CSS Paged Table 可以輕鬆地將長表格拆分成多個頁面，實現更好的數據展示效果。如果你需要將大型表格展示在網頁上，可以嘗試使用 CSS Paged Table。