menu

表格是一个很好的方法用于处理大量的数据。我们提供了一些实体类来帮助你更简单的表格增加样式。此外,为了提高移动端的体验,所有的表格在手机屏幕的宽度都是自动居中的。

无边框表格

表格默认是无边框的。

姓名 年龄 民族
张三 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