Pure.CSS表介绍

Pure.CSS表是一个基于纯CSS编写的表格组件，它提供了一组强大且易于使用的CSS样式和布局，可以为你的网站添加漂亮而响应式的表格。

安装Pure.CSS表

Pure.CSS表可以通过CDN或下载安装包来使用。

通过CDN使用

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css">

下载安装包

你可以从Pure.CSS的官方网站下载并手动安装Pure.CSS表。

使用Pure.CSS表

要使用Pure.CSS表，你需要在HTML中添加一个具有.pure-table类的表标签。你还可以为表格添加其他Pure.CSS类以更改颜色和样式。

<table class="pure-table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

改变颜色和样式

你可以通过添加其他Pure.CSS类来更改表格的颜色和样式。下面是一些可用的类：

• .pure-table-bordered：给表格添加边框
• .pure-table-horizontal：使表格行水平布局
• .pure-table-striped：使表格具有斑马线效果

<table class="pure-table pure-table-bordered pure-table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

响应式表格

Pure.CSS表格提供了一个响应式的网格系统，可以在不同大小的屏幕上自动调整布局。要使用响应式表格，你需要添加一个具有.pure-table类和任何其他必要的网格类的表格标记。

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2">
    <table class="pure-table pure-table-bordered pure-table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="pure-u-1 pure-u-md-1-2">
    <table class="pure-table pure-table-bordered pure-table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

总结

Pure.CSS表是一个易于使用和定制的表格组件，具有多种样式和响应式布局。它是一个非常适合程序员使用的组件，可以使页面更加规范和易于使用。