无边框表格
表格默认是无边框的。
姓名 | 年龄 | 民族 |
---|---|---|
张三 | 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 |