表格是一个很好的方法用于处理大量的数据。我们提供了一些实体类来帮助你更简单的表格增加样式。此外,为了提高移动端的体验,所有的表格在手机屏幕的宽度都是自动居中的。
无边框表格
表格默认是无边框的。
| 姓名 | 年龄 | 民族 | 
|---|---|---|
| 张三 | 17 | 汉 | 
| 李四 | 12 | 苗 | 
| 李明 | 25 | 汉 | 
| 李晓明 | 23 | 蒙古 | 
      <table>
        <thead>
          <tr>
              <th data-field="id">姓名</th>
              <th data-field="name">年龄</th>
              <th data-field="price">民族</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>17</td>
            <td>汉</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>12</td>
            <td>苗</td>
          </tr>
          <tr>
            <td>李明</td>
            <td>25</td>
            <td>汉</td>
          </tr>
        </tbody>
      </table>
            有边框表格
添加 class="bordered"table标签中实现表格的边框。
| 名称 | 数量 | 总价 | 
|---|---|---|
| 白菜 | 1 | ¥0.87 | 
| 青菜 | 2 | ¥3.76 | 
| 土豆 | 2 | ¥7.00 | 
| 山药 | 2 | ¥9.99 | 
带条纹的表格
添加class="striped"到table标签中实现条纹表格。
| 名称 | 数量 | 总价 | 
|---|---|---|
| 白菜 | 1 | ¥0.87 | 
| 青菜 | 2 | ¥3.76 | 
| 萝卜 | 3 | ¥7.00 | 
| 土豆 | 3 | ¥9.99 | 
高亮表格
添加class="highlight"table标签中实现高亮表格。
| 名称 | 数量 | 总价 | 
|---|---|---|
| 白菜 | 1 | ¥0.87 | 
| 青菜 | 2 | ¥3.76 | 
| 萝卜 | 3 | ¥7.00 | 
| 土豆 | 3 | ¥9.99 | 
居中的表格
添加class="centered"到table标签中实现表格内容居中对齐。
| 名称 | 数量 | 总价 | 
|---|---|---|
| 白菜 | 1 | ¥0.87 | 
| 青菜 | 2 | ¥3.76 | 
| 萝卜 | 3 | ¥7.00 | 
| 土豆 | 3 | ¥9.99 | 
响应式表格
添加class="responsive-table"到表格标签中实现响应式表格,当屏幕大小不足以显示表格内容时,将出现水平滚动条。
| 名称 | 数量 | 总价 | 
|---|---|---|
| 白菜 | 1 | ¥0.87 | 
| 青菜 | 2 | ¥3.76 | 
| 萝卜 | 3 | ¥7.00 | 
| 土豆 | 3 | ¥9.99 |