menu

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

名称 项目名称 项目价格
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99 

      <table>
        <thead>
          <tr>
              <th>名称</th>
              <th>项目名称</th>
              <th>项目价格</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="striped"到table标签生成条纹表格

名称 项目名称 项目价格
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

高亮表格

添加class="highlight"到table标签生成高亮表格。

名称 项目名称 项目价格
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

居中表格

添加class="centered"到table标签生成居中表格，表格内文本居中

名称 项目名称 项目价格
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

响应式表格

添加class="responsive-table"到table标签使表格在较小的屏幕宽度上水平滚动。

名称 项目名称 项目价格
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99