CSS Paged Table

小蓝 • 2024-12-29 14:18 • 编程

一、概述

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。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300810.html