Table
使用时注意 <table>
HTML 结构的完整性。
基本样式
添加 .am-table
。
网站名称 |
网址 |
创建时间 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI(Active) |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
<table class="am-table">
<thead>
<tr>
<th>网站名称</th>
<th>网址</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr class="am-active">
<td>Amaze UI(Active)</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
</tbody>
</table>
基本边框
添加 .am-table-bordered
类。
网站名称 |
网址 |
创建时间 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
<table class="am-table am-table-bordered">
...
</table>
圆角边框
同时添加 .am-table-bordered
、 .am-table-radius
,外层圆角边框通过 box-shadow
实现。
网站名称 |
网址 |
创建时间 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
<table class="am-table am-table-bordered am-table-radius am-table-striped">
...
</table>
单元格状态
表示表格状态的 class 添加到 tr
整行整行,添加到 td
高亮单元格。
.am-active
激活;
.am-disabled
禁用;
.am-primary
蓝色高亮;
.am-success
绿色高亮;
.am-warning
橙色高亮;
.am-danger
红色高亮。
Class |
状态描述 |
目标元素 |
.am-active |
激活 |
td |
.am-active |
激活 |
tr |
.am-disabled |
禁用 |
td |
.am-disabled |
禁用 |
tr |
.am-primary |
蓝色高亮 |
td |
.am-primary |
蓝色高亮 |
tr |
.am-success |
绿色高亮 |
td |
.am-success |
绿色高亮 |
tr |
.am-warning |
橙色高亮 |
td |
.am-warning |
橙色高亮 |
tr |
.am-danger |
橙色高亮 |
td |
.am-danger |
橙色高亮 |
tr |
其他效果
.am-table-striped
斑马纹效果
.am-table-hover
hover 状态
网站名称 |
网址 |
创建时间 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
<table class="am-table am-table-striped am-table-hover">
...
</table>
所有样式叠加
网站名称 |
网址 |
创建时间 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI(Active) |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
Amaze UI |
http://amazeui.org |
2012-10-01 |
<table class="am-table am-table-bordered am-table-striped am-table-hover">
<thead>
<tr>
<th>网站名称</th>
<th>网址</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
...
<tr class="am-active">
<td>Amaze UI(Active)</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
...
</tbody>
</table>
参考资源