Question

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

无边框表格

表格默认是无边框的。

<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 标签中实现表格的边框。

带条纹的表格

添加 class="striped" 到 table 标签中实现条纹表格。

高亮表格

添加 class="highlight" table 标签中实现高亮表格。

居中的表格

添加 class="centered" 到 table 标签中实现表格内容居中对齐。

响应式表格

添加 class="responsive-table" 到表格标签中实现响应式表格，当屏幕大小不足以显示表格内容时，将出现水平滚动条。