Table 普通表格
使用说明
本表格是原生table，没有使用任何插件，纯css改良而来的。
表格类参数
| 样式 | 说明 |
|---|---|
| ax-table | 默认表格没有左右边框，居左排列 |
| ax-table display="border" | 带四周边框的表格 |
| ax-table display="grid" | 带网格边框的表格 |
| ax-table stripe | 表格行颜色交替，第一行开始变色（tbody奇数行变色） |
| ax-table stripe="odd" | 表格行颜色交替，交替方式同上 |
| ax-table stripe="even" | 表格行颜色交替，第二行开始变色（tbody偶数行变色） |
| ax-table hover | 鼠标经过行变色 |
| ax-table nowrap | 单元格不换行 |
| ax-table ax-align-left | 表格内容靠左排列 |
| ax-table ax-align-center | 表格内容居中排列 |
| ax-table ax-align-right | 表格内容靠右排列 |
默认的表格
给table标签添加ax-table类即可实现默认表格样式，默认表格是没有左右边框且居中排列的。
| 序号 | 所在城市 | 校名 | 办学层次 |
|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 |
| 66 | 北京市 | 中国科学院大学 | 本科 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 |
| 92 | 北京市 | 北京网络职业学院 | 专科 |
| 95 | 天津市 | 天津科技大学 | 本科 |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
</tr>
</tbody>
</table>
有边框的表格
给table标签添加display=border属性即可实现有四周边框的表格。
| 序号 | 所在城市 | 校名 | 办学层次 |
|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 |
| 66 | 北京市 | 中国科学院大学 | 本科 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 |
| 92 | 北京市 | 北京网络职业学院 | 专科 |
| 95 | 天津市 | 天津科技大学 | 本科 |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table" display="border">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
</tr>
</tbody>
</table>
有网格边框的表格
给table标签添加display=grid属性即可实现有网格边框的表格。
| 序号 | 所在城市 | 校名 | 办学层次 |
|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 |
| 66 | 北京市 | 中国科学院大学 | 本科 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 |
| 92 | 北京市 | 北京网络职业学院 | 专科 |
| 95 | 天津市 | 天津科技大学 | 本科 |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table" display="grid">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
</tr>
</tbody>
</table>
被选中的表格
给表格的tr标签添加selected属性即可实现行被选中样式。
| 序号 | 所在城市 | 校名 | 办学层次 | 状态 |
|---|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 | |
| 66 | 北京市 | 中国科学院大学 | 本科 | |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 | |
| 92 | 北京市 | 北京网络职业学院 | 专科 | |
| 95 | 天津市 | 天津科技大学 | 本科 | |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
<td><i class="ax-iconfont ax-icon-circle ax-color-ignore"></i></td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
<td><i class="ax-iconfont ax-icon-circle ax-color-ignore"></i></td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
<td><i class="ax-iconfont ax-icon-circle ax-color-ignore"></i></td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
<td><i class="ax-iconfont ax-icon-circle ax-color-ignore"></i></td>
</tr>
<tr selected>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
<td><i class="ax-iconfont ax-icon-check-o-f ax-color-primary"></i></td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
<td><i class="ax-iconfont ax-icon-circle ax-color-ignore"></i></td>
</tr>
</tbody>
</table>
行交替变色
给表格添加stripe属性表格行将对奇数行使用浅色背景色，等效于stripe=odd；如果需要对偶数行使用浅色背景色可使用stripe=even。
| 序号 | 所在城市 | 校名 | 办学层次 |
|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 |
| 66 | 北京市 | 中国科学院大学 | 本科 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 |
| 92 | 北京市 | 北京网络职业学院 | 专科 |
| 95 | 天津市 | 天津科技大学 | 本科 |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table" stripe>
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
</tr>
</tbody>
</table>
鼠标经过行变色
给表格添加hover属性即可。
| 序号 | 所在城市 | 校名 | 办学层次 |
|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 |
| 66 | 北京市 | 中国科学院大学 | 本科 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 |
| 92 | 北京市 | 北京网络职业学院 | 专科 |
| 95 | 天津市 | 天津科技大学 | 本科 |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table" hover>
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
</tr>
</tbody>
</table>
居中排列的表格
给table标签添加ax-align-center类即可实现居中排列的表格。关于ax-align-*使用方法可查看这里。
| 序号 | 所在城市 | 校名 | 办学层次 |
|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 |
| 66 | 北京市 | 中国科学院大学 | 本科 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 |
| 92 | 北京市 | 北京网络职业学院 | 专科 |
| 95 | 天津市 | 天津科技大学 | 本科 |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table ax-align-center">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
</tr>
</tbody>
</table>
单行超出省略的表格
框架定义了表格td单行内容的最大长度是160px，给td内容添加ax-ell类即可实现单行超出省略。如果160px不是用户想要的宽度，可以直接将width样式写在标签上。
| 序号 | 所在城市 | 校名 | 办学层次 | 简介 |
|---|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 | 学校有专任教师117人，外聘教师32人，生师比为16.35；双师型教师有52人，占专任教师总数的44.44%，占专业课教师的65% |
| 66 | 北京市 | 中国科学院大学 | 本科 | 校部直属院系中心教师539人，研究所教师 1241人，外聘教师554人，授课教师中有两院院士40人、中国科学院百人计划入选者365人、国家杰出青年科学基金项目获得者38人、境外教师20人 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 | 学校有教职工499人，任课教师总数达到418人，其中省级及以上教学名师14人，北京市中青年骨干教师46名 |
| 92 | 北京市 | 北京网络职业学院 | 专科 | 学校全日制在校生398人，毕业33人，2017-2018学年，学校在岗教职员工总数为118人，其中专职教师46人，兼职教师总数为41人 |
| 95 | 天津市 | 天津科技大学 | 本科 | 学校有教职工2100余人，其中专任教师1400余人，博士生、硕士生导师794人 |
| 96 | 天津市 | 天津工业大学 | 本科 | 现有教职工2100余名, 其中专任教师1600余名、具有博士学位教师900余名、具有高级职称教师800余名 |
<table class="ax-table">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
<td><span class="ax-ell">学校有专任教师117人，外聘教师32人，生师比为16.35；双师型教师有52人，占专任教师总数的44.44%，占专业课教师的65%</span></td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
<td><span class="ax-ell">校部直属院系中心教师539人，研究所教师 1241人，外聘教师554人，授课教师中有两院院士40人、中国科学院百人计划入选者365人、国家杰出青年科学基金项目获得者38人、境外教师20人</span></td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
<td><span class="ax-ell">学校有教职工499人，任课教师总数达到418人，其中省级及以上教学名师14人，北京市中青年骨干教师46名</span></td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
<td><span class="ax-ell">学校全日制在校生398人，毕业33人，2017-2018学年，学校在岗教职员工总数为118人，其中专职教师46人，兼职教师总数为41人</span></td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
<td><span class="ax-ell">学校有教职工2100余人，其中专任教师1400余人，博士生、硕士生导师794人</span></td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
<td><span class="ax-ell">现有教职工2100余名, 其中专任教师1600余名、具有博士学位教师900余名、具有高级职称教师800余名</span></td>
</tr>
</tbody>
</table>
多行超出省略的表格
对表格内容可是使用axMore插件进行省略处理，由于table的td宽度是自由伸缩的，所以有必要对使用axMore的节点定义最大宽度。关于axMore使用方法可查看这里。
| 序号 | 所在城市 | 校名 | 办学层次 | 简介 |
|---|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 | 学校有专任教师117人，外聘教师32人，生师比为16.35；双师型教师有52人，占专任教师总数的44.44%，占专业课教师的65% |
| 66 | 北京市 | 中国科学院大学 | 本科 | 校部直属院系中心教师539人，研究所教师 1241人，外聘教师554人，授课教师中有两院院士40人、中国科学院百人计划入选者365人、国家杰出青年科学基金项目获得者38人、境外教师20人 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 | 学校有教职工499人，任课教师总数达到418人，其中省级及以上教学名师14人，北京市中青年骨干教师46名 |
| 92 | 北京市 | 北京网络职业学院 | 专科 | 学校全日制在校生398人，毕业33人，2017-2018学年，学校在岗教职员工总数为118人，其中专职教师46人，兼职教师总数为41人 |
| 95 | 天津市 | 天津科技大学 | 本科 | 学校有教职工2100余人，其中专任教师1400余人，博士生、硕士生导师794人 |
| 96 | 天津市 | 天津工业大学 | 本科 | 现有教职工2100余名, 其中专任教师1600余名、具有博士学位教师900余名、具有高级职称教师800余名 |
<table class="ax-table">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
<td style="max-width:30rem"><span axMore>学校有专任教师117人，外聘教师32人，生师比为16.35；双师型教师有52人，占专任教师总数的44.44%，占专业课教师的65%</span></td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
<td style="max-width:30rem"><span axMore>校部直属院系中心教师539人，研究所教师 1241人，外聘教师554人，授课教师中有两院院士40人、中国科学院百人计划入选者365人、国家杰出青年科学基金项目获得者38人、境外教师20人</span></td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
<td style="max-width:30rem"><span axMore>学校有教职工499人，任课教师总数达到418人，其中省级及以上教学名师14人，北京市中青年骨干教师46名</span></td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
<td style="max-width:30rem"><span axMore>学校全日制在校生398人，毕业33人，2017-2018学年，学校在岗教职员工总数为118人，其中专职教师46人，兼职教师总数为41人</span></td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
<td style="max-width:30rem"><span axMore>学校有教职工2100余人，其中专任教师1400余人，博士生、硕士生导师794人</span></td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
<td style="max-width:30rem"><span axMore>现有教职工2100余名, 其中专任教师1600余名、具有博士学位教师900余名、具有高级职称教师800余名</span></td>
</tr>
</tbody>
</table>
带表头提示的表格
| 序号 | 所在城市 | 校名 | 办学层次 |
|---|---|---|---|
|
“高等学校”是大学、专门学院、高等职业技术学院、高等专科学校的统称，简称高校。
|
|||
| 64 | 北京市 | 北京警察学院 | 本科 |
| 66 | 北京市 | 中国科学院大学 | 本科 |
| 68 | 北京市 | 北京工业职业技术学院 | 专科 |
| 92 | 北京市 | 北京网络职业学院 | 专科 |
| 95 | 天津市 | 天津科技大学 | 本科 |
| 96 | 天津市 | 天津工业大学 | 本科 |
<table class="ax-table" display="border">
<thead>
<tr>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="ax-alert ax-warning">“高等学校”是大学、专门学院、高等职业技术学院、高等专科学校的统称，简称高校。</div>
</td>
</tr>
<tr>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
</tr>
<tr>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
</tr>
<tr>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
</tr>
<tr>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
</tr>
<tr>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
</tr>
<tr>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
</tr>
</tbody>
</table>
带复选的表格
| 序号 | 所在城市 | 校名 | 办学层次 | 操作 | |
|---|---|---|---|---|---|
| 64 | 北京市 | 北京警察学院 | 本科 | ||
| 66 | 北京市 | 中国科学院大学 | 本科 | ||
| 68 | 北京市 | 北京工业职业技术学院 | 专科 | ||
| 92 | 北京市 | 北京网络职业学院 | 专科 | ||
| 95 | 天津市 | 天津科技大学 | 本科 | ||
| 96 | 天津市 | 天津工业大学 | 本科 | ||
|
选择全部
批量删除
|
|||||
<table class="ax-table" display="border">
<thead>
<tr>
<th style="width:50px;"><input name="" type="checkbox" value=""></th>
<th>序号</th>
<th>所在城市</th>
<th>校名</th>
<th>办学层次</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="" type="checkbox" value=""></td>
<td>64</td>
<td>北京市</td>
<td>北京警察学院</td>
<td>本科</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-f" title="删除"></a></div>
</td>
</tr>
<tr>
<td><input name="" type="checkbox" value=""></td>
<td>66</td>
<td>北京市</td>
<td>中国科学院大学</td>
<td>本科</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-f" title="删除"></a></div>
</td>
</tr>
<tr>
<td><label class="ax-checkbox ax-bone"><input type="checkbox" name="star3" value="2"><span></span></label></td>
<td>68</td>
<td>北京市</td>
<td>北京工业职业技术学院</td>
<td>专科</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-f" title="删除"></a></div>
</td>
</tr>
<tr>
<td><label class="ax-checkbox ax-bone"><input type="checkbox" name="star3" value="2"><span></span></label></td>
<td>92</td>
<td>北京市</td>
<td>北京网络职业学院</td>
<td>专科</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-f" title="删除"></a></div>
</td>
</tr>
<tr>
<td><input name="" type="checkbox" value=""></td>
<td>95</td>
<td>天津市</td>
<td>天津科技大学</td>
<td>本科</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-f" title="删除"></a></div>
</td>
</tr>
<tr>
<td><input name="" type="checkbox" value=""></td>
<td>96</td>
<td>天津市</td>
<td>天津工业大学</td>
<td>本科</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-f" title="删除"></a></div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<div class="ax-flex-row">
<div class="ax-flex-block ax-align-left">选择全部</div>
<a href="###" class="ax-btn ax-primary ax-xs">批量删除</a>
</div>
</td>
</tr>
</tfoot>
</table>
带按钮和操作的表格
| 标题 | 头像 | 状态 | 开始日期 | 截止日期 | 操作 |
|---|---|---|---|---|---|
| 南航与英航签署联营合作协议代码共享 | 纠正错误 | - | 2017-10-23 | ||
| 12月，到英国大城小镇看“亮灯” | 2016-2-6 | 2017-10-23 | |||
| 英国人喝茶不再流行贵族范 | 2016-2-6 | 2017-10-23 | |||
| 西班牙斗牛与逗牛，精彩各不同 | 纠正错误 | - | 2017-10-23 | ||
| 可乐果，尼日尔的快乐果 | 2016-2-6 | 2017-10-23 |
<table class="ax-table ax-border">
<thead>
<tr>
<th>标题</th>
<th style="width:80px;">头像</th>
<th style="width: 120px;">状态</th>
<th style="width: 120px;">开始日期</th>
<th style="width: 120px;">截止日期</th>
<th style="width:80px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="###" class="ax-ell"><span class="ax-iconfont ax-icon-email-f"></span> 南航与英航签署联营合作协议代码共享</a></td>
<td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(<?=$public?>images/head01.jpg);"></a></td>
<td><a href="###" class="ax-btn ax-xs">纠正错误</a></td>
<td>-</td>
<td>2017-10-23</td>
<td>
<a href="###" class="ax-btn ax-xs ax-icon"><span class="ax-iconfont ax-icon-eye-f" title="查看"></span></a>
<a href="###" class="ax-btn ax-xs ax-primary ax-icon"><span class="ax-iconfont ax-icon-eye-f" title="查看"></span></a>
</td>
</tr>
<tr>
<td><a href="###"><span class="ax-iconfont ax-icon-theme-f"></span> <span>12月，到英国大城小镇看“亮灯”</span></a></td>
<td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(<?=$public?>images/head02.jpg);"></a></td>
<td><span class="ax-iconfont ax-icon-check-o-f ax-color-forbid" title="已完成"></span></td>
<td>2016-2-6</td>
<td>2017-10-23</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a></div>
</td>
</tr>
<tr>
<td><a href="###"><span class="ax-iconfont ax-icon-pie-f"></span> <span>英国人喝茶不再流行贵族范</span></a></td>
<td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(<?=$public?>images/head03.jpg);"></a></td>
<td><span class="ax-iconfont ax-icon-check-o-f ax-color-ignore" title="已完成"></span></td>
<td>2016-2-6</td>
<td>2017-10-23</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"><span class="ax-dot ax-bg-error"></span></a><a href="###" class="ax-iconfont ax-icon-editing-f ax-color-forbid" title="编辑"></a></div>
</td>
</tr>
<tr>
<td><a href="###"><span class="ax-iconfont ax-icon-file-text-f"></span> <span>西班牙斗牛与逗牛，精彩各不同</span></a></td>
<td><a href="###" class="ax-avatar ax-xxs ax-radius" style="background-image: url(<?=$public?>images/head04.jpg);"></a></td>
<td><a href="###" class="ax-btn ax-btn-ignore ax-xs">纠正错误</a></td>
<td>-</td>
<td>2017-10-23</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a></div>
</td>
</tr>
<tr>
<td><a href="###"><span class="ax-iconfont ax-icon-plus-s-f"></span> <span>可乐果，尼日尔的快乐果</span></a></td>
<td><a href="###" class="ax-avatar ax-xxs ax-radius" style="background-image: url(<?=$public?>images/head05.jpg);"></a></td>
<td><span class="ax-iconfont ax-icon-check-o-f ax-color-primary" title="已完成"></span></td>
<td>2016-2-6</td>
<td>2017-10-23</td>
<td>
<div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-f" title="查看"></a></div>
</td>
</tr>
</tbody>
</table>
表单
在table中的表单控件均使用ax-xs尺寸，另外对ax-form-group包裹的input采用自适应宽度的办法，对td/th直接子元素input和select采用固定120px的方法，当然用户可行内定义表单元素宽度。
<table class="ax-table" display="border">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
<th>年级</th>
<th style="width:120px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>文汉阳</td>
<td>
<label class="ax-radio ax-xs"><input name="sex" value="" type="radio" checked><span>男</span></label>
<label class="ax-radio ax-xs"><input name="sex" value="" type="radio"><span>女</span></label>
</td>
<td>
<div class="ax-form-group ax-xs ax-row">
<div class="ax-col">
<div class="ax-form-input"><input type="text" class="ax-xs"></div>
</div>
<span class="ax-form-txt ax-color-ignore">厘米</span>
</div>
</td>
<td>
<input type="text" class="ax-xs">
</td>
<td>
<select class="ax-select ax-xs">
<option>初中一年级</option>
<option>初中二年级</option>
<option>初中三年级</option>
</select>
</td>
<td>
<a href="###" class="ax-btn ax-primary ax-xs">核对</a>
<a href="###" class="ax-btn ax-error ax-xs">删除</a>
</td>
</tr>
<tr>
<td>李川</td>
<td>
<label class="ax-radio ax-xs"><input name="sex2" value="" type="radio" checked><span>男</span></label>
<label class="ax-radio ax-xs"><input name="sex2" value="" type="radio"><span>女</span></label>
</td>
<td>
<div class="ax-form-group ax-xs ax-row">
<div class="ax-col">
<div class="ax-form-input"><input type="text" class="ax-xs"></div>
</div>
<span class="ax-form-txt ax-color-ignore">厘米</span>
</div>
</td>
<td>
<input type="text" class="ax-xs">
</td>
<td>
<select class="ax-select ax-xs">
<option>初中一年级</option>
<option>初中二年级</option>
<option>初中三年级</option>
</select>
</td>
<td>
<a href="###" class="ax-btn ax-primary ax-xs">核对</a>
<a href="###" class="ax-btn ax-error ax-xs">删除</a>
</td>
</tr>
<tr>
<td>欧阳忠实</td>
<td>
<label class="ax-radio ax-xs"><input name="sex3" value="" type="radio" checked><span>男</span></label>
<label class="ax-radio ax-xs"><input name="sex3" value="" type="radio"><span>女</span></label>
</td>
<td>
<div class="ax-form-group ax-xs ax-row">
<div class="ax-col">
<div class="ax-form-input"><input type="text" class="ax-xs"></div>
</div>
<span class="ax-form-txt ax-color-ignore">厘米</span>
</div>
</td>
<td>
<input type="text" class="ax-xs">
</td>
<td>
<select class="ax-select ax-xs">
<option>初中一年级</option>
<option>初中二年级</option>
<option>初中三年级</option>
</select>
</td>
<td>
<a href="###" class="ax-btn ax-primary ax-xs">核对</a>
<a href="###" class="ax-btn ax-error ax-xs">删除</a>
</td>
</tr>
</tbody>
</table>
冻结
不使用js情况下，可实现三种冻结方式，即最左一列冻结，最右一列冻结和表头冻结。请参考示例按如下步骤操作：
- 1、将table使用
ax-table-wrapper包裹 - 2、对ax-table-wrapper使用fixedheader、fixedleft或fixedright
- 3、如果需要左右冻结，需要将table的宽度值设置大于容器宽度，如果表格足够宽可使用
nowrap属性让单元格不换行 - 4、如果需要头部冻结，需要将ax-table-wrapper的高度值设置大于table高度
- 5、如果需要使用网格线，即使用
display=grid/border需要应用在ax-table-wrapper上
| 日期 | hour | 城市 | AQI | PM2.5 | PM2.5_24h | PM10 | PM10_24h | SO2 | SO2_24h | NO2 | NO2_24h | O3 | O3_24h | O3_8h | O3_8h_24h | CO | CO_24h |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2014-05-13 | 18 | 张家界 | 103 | 77 | 67 | 105 | 87 | 8 | 13 | 15 | 14 | 81 | 114 | 86 | 109 | 1.637 | 1.372 |
| 2014-05-13 | 18 | 湘潭 | 84 | 62 | 53 | 104 | 92 | 44 | 52 | 49 | 42 | 76 | 129 | 93 | 139 | 1.127 | 1.198 |
| 2014-05-13 | 18 | 沧州 | 84 | 46 | 50 | 75 | 81 | 22 | 28 | 22 | 24 | 127 | 159 | 140 | 145 | 0.768 | 0.734 |
| 2014-05-13 | 18 | 淄博 | 83 | 48 | 48 | 114 | 126 | 54 | 100 | 47 | 51 | 138 | 150 | 137 | 137 | 1.324 | 1.632 |
| 2014-05-13 | 18 | 杭州 | 95 | 71 | 59 | 132 | 111 | 47 | 30 | 69 | 61 | 99 | 129 | 95 | 152 | 0.918 | 0.913 |
| 2014-05-13 | 18 | 赤峰 | 113 | 19 | 37 | 174 | 135 | 12 | 27 | 11 | 29 | 66 | 79 | 72 | 83 | 0.657 | 1.316 |
| 2014-05-13 | 18 | 福州 | 60 | 27 | 23 | 68 | 52 | 8 | 7 | 30 | 26 | 75 | 107 | 87 | 88 | 1.182 | 1.199 |
| 2014-05-13 | 18 | 舟山 | 74 | 31 | 51 | 38 | 66 | 8 | 12 | 33 | 38 | 116 | 178 | 128 | 146 | 1.141 | 1.351 |
| 2014-05-13 | 18 | 日照 | 121 | 76 | 65 | 169 | 155 | 30 | 48 | 43 | 66 | 240 | 240 | 180 | 180 | 0.871 | 1.376 |
| 2014-05-13 | 18 | 宝鸡 | 63 | 37 | 57 | 75 | 117 | 20 | 14 | 33 | 44 | 59 | 96 | 36 | 75 | 1.784 | 1.963 |
| 2014-05-13 | 18 | 韶关 | 78 | 57 | 42 | 73 | 57 | 45 | 25 | 44 | 29 | 34 | 42 | 31 | 49 | 2.705 | 2.188 |
| 2014-05-13 | 18 | 河源 | 22 | 13 | 35 | 22 | 55 | 9 | 15 | 33 | 34 | 35 | 59 | 37 | 39 | 1.225 | 1.356 |
<div class="ax-table-wrapper" display="grid" style="height:30rem;" fixedheader fixedleft fixedright>
<table class="ax-table" nowrap>
<thead>
<tr>
<th>日期</th>
<th>hour</th>
<th>城市</th>
<th>AQI</th>
<th>PM2.5</th>
<th>PM2.5_24h</th>
<th>PM10</th>
<th>PM10_24h</th>
<th>SO2</th>
<th>SO2_24h</th>
<th>NO2</th>
<th>NO2_24h</th>
<th>O3</th>
<th>O3_24h</th>
<th>O3_8h</th>
<th>O3_8h_24h</th>
<th>CO</th>
<th>CO_24h</th>
</tr>
</thead>
<tbody>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>张家界</td>
<td>103</td>
<td>77</td>
<td>67</td>
<td>105</td>
<td>87</td>
<td>8</td>
<td>13</td>
<td>15</td>
<td>14</td>
<td>81</td>
<td>114</td>
<td>86</td>
<td>109</td>
<td>1.637</td>
<td>1.372</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>湘潭</td>
<td>84</td>
<td>62</td>
<td>53</td>
<td>104</td>
<td>92</td>
<td>44</td>
<td>52</td>
<td>49</td>
<td>42</td>
<td>76</td>
<td>129</td>
<td>93</td>
<td>139</td>
<td>1.127</td>
<td>1.198</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>沧州</td>
<td>84</td>
<td>46</td>
<td>50</td>
<td>75</td>
<td>81</td>
<td>22</td>
<td>28</td>
<td>22</td>
<td>24</td>
<td>127</td>
<td>159</td>
<td>140</td>
<td>145</td>
<td>0.768</td>
<td>0.734</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>淄博</td>
<td>83</td>
<td>48</td>
<td>48</td>
<td>114</td>
<td>126</td>
<td>54</td>
<td>100</td>
<td>47</td>
<td>51</td>
<td>138</td>
<td>150</td>
<td>137</td>
<td>137</td>
<td>1.324</td>
<td>1.632</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>杭州</td>
<td>95</td>
<td>71</td>
<td>59</td>
<td>132</td>
<td>111</td>
<td>47</td>
<td>30</td>
<td>69</td>
<td>61</td>
<td>99</td>
<td>129</td>
<td>95</td>
<td>152</td>
<td>0.918</td>
<td>0.913</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>赤峰</td>
<td>113</td>
<td>19</td>
<td>37</td>
<td>174</td>
<td>135</td>
<td>12</td>
<td>27</td>
<td>11</td>
<td>29</td>
<td>66</td>
<td>79</td>
<td>72</td>
<td>83</td>
<td>0.657</td>
<td>1.316</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>福州</td>
<td>60</td>
<td>27</td>
<td>23</td>
<td>68</td>
<td>52</td>
<td>8</td>
<td>7</td>
<td>30</td>
<td>26</td>
<td>75</td>
<td>107</td>
<td>87</td>
<td>88</td>
<td>1.182</td>
<td>1.199</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>舟山</td>
<td>74</td>
<td>31</td>
<td>51</td>
<td>38</td>
<td>66</td>
<td>8</td>
<td>12</td>
<td>33</td>
<td>38</td>
<td>116</td>
<td>178</td>
<td>128</td>
<td>146</td>
<td>1.141</td>
<td>1.351</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>日照</td>
<td>121</td>
<td>76</td>
<td>65</td>
<td>169</td>
<td>155</td>
<td>30</td>
<td>48</td>
<td>43</td>
<td>66</td>
<td>240</td>
<td>240</td>
<td>180</td>
<td>180</td>
<td>0.871</td>
<td>1.376</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>宝鸡</td>
<td>63</td>
<td>37</td>
<td>57</td>
<td>75</td>
<td>117</td>
<td>20</td>
<td>14</td>
<td>33</td>
<td>44</td>
<td>59</td>
<td>96</td>
<td>36</td>
<td>75</td>
<td>1.784</td>
<td>1.963</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>韶关</td>
<td>78</td>
<td>57</td>
<td>42</td>
<td>73</td>
<td>57</td>
<td>45</td>
<td>25</td>
<td>44</td>
<td>29</td>
<td>34</td>
<td>42</td>
<td>31</td>
<td>49</td>
<td>2.705</td>
<td>2.188</td>
</tr>
<tr>
<td>2014-05-13</td>
<td>18</td>
<td>河源</td>
<td>22</td>
<td>13</td>
<td>35</td>
<td>22</td>
<td>55</td>
<td>9</td>
<td>15</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>59</td>
<td>37</td>
<td>39</td>
<td>1.225</td>
<td>1.356</td>
</tr>
</tbody>
</table>
</div>
排序表格
借助axList.js插件可实现表格的排序、分页、搜索和筛选。axList插件的用法请点击这里。