表格



组织数据的最好方式之一就是使用表格,我们提供了一些有用的class帮助你更方便容易的给表格赋予各种样式。另外,为了提升手机端的体验,所有表格在手机端都是自动居中对齐。

无边

默认表格是无边的

名称 商品名称 商品价格
Alvin Eclair ¥0.87
Alan Jellybean ¥3.76
Jonathan Lollipop ¥7.00
Shannon KitKat ¥9.99

    <table>
      <thead>
        <tr>
          <th data-field="id">Name</th>
          <th data-field="name">Item Name</th>
          <th data-field="price">Item Price</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Alvin</td>
          <td>Eclair</td>
          <td>$0.87</td>
        </tr>
        <tr>
          <td>Alan</td>
          <td>Jellybean</td>
          <td>$3.76</td>
        </tr>
        <tr>
          <td>Jonathan</td>
          <td>Lollipop</td>
          <td>$7.00</td>
        </tr>
      </tbody>
    </table>
            

有边

使用class="bordered"来为表格添加边框。

名称 商品名称 商品价格
Alvin Eclair ¥0.87
Alan Jellybean ¥3.76
Jonathan Lollipop ¥7.00
Shannon KitKat ¥9.99

条纹

使用class="striped"使表格具有条纹效果。

名称 商品名称 商品价格
Alvin Eclair ¥0.87
Alan Jellybean ¥3.76
Jonathan Lollipop ¥7.00
Shannon KitKat ¥9.99

悬停

使用class="hoverable"使鼠标悬停/划过时高亮。

名称 商品名称 商品价格
Alvin Eclair ¥0.87
Alan Jellybean ¥3.76
Jonathan Lollipop ¥7.00
Shannon KitKat ¥9.99

居中

使用class="centered"使单元格中的文字居中。

名称 商品名称 商品价格
Alvin Eclair ¥0.87
Alan Jellybean ¥3.76
Jonathan Lollipop ¥7.00
Shannon KitKat ¥9.99

响应式

使用class="responsive-table"在小屏幕设备上具有滚动条。

名称 商品名称 商品价格
Alvin Eclair ¥0.87
Alan Jellybean ¥3.76
Jonathan Lollipop ¥7.00
Shannon KitKat ¥9.99