Table 普通表格
使用说明
本表格是原生table，没有使用任何插件，纯css改良而来的。
表格类参数
| 样式 | 说明 |
|---|---|
| ax-table | 默认表格没有左右边框，居中排列 |
| ax-table ax-border | 带四周边框的表格 |
| ax-table ax-border-grid | 带网格边框的表格 |
| ax-table ax-stripe | 表格行颜色交替，第一行开始变色 |
| ax-table ax-stripe-none | 表格不交替变色，默认 |
| ax-table ax-stripe-odd | 表格行颜色交替，交替方式同ax-stripe |
| ax-table ax-stripe-even | 表格行颜色交替，第二行开始变色 |
| ax-table ax-hover | 鼠标经过行变色 |
| ax-table ax-hover-none | 鼠标经过行不变色，默认 |
| ax-table ax-align-left | 表格内容靠左排列 |
| ax-table ax-align-center | 表格内容居中排列 |
| ax-table ax-align-right | 表格内容靠右排列 |
默认的表格
给table标签添加ax-table类即可实现默认表格样式，默认表格是没有左右边框且居中排列的。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 | 会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。</td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。</td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。</td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略，位于企业的决策层。</td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
有边框的表格
给table标签添加ax-border类即可实现有四周边框的表格。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 | 会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table ax-border">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。</td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。</td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。</td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略，位于企业的决策层。</td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
有网格边框的表格
给table标签添加ax-border-grid类即可实现有网格边框的表格。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 | 会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table ax-border-grid">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。</td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。</td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。</td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略，位于企业的决策层。</td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
被选中的表格
给表格的tr标签添加ax-selected类即可实现行被选中样式。
| 等级 | 说明 | 举例 | 选择 |
|---|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 一旦工作出现失误，会给其他部门的工作带来不便。 |
会计、分析员、一线督导、一线经理、业务员 | |
| B、略有 | 对实现企业的发展战略提供支持性服务。 一旦工作出现失误，会造成其他部门工作效率的损失。 |
部门主管、执行经理 | |
| C、中等 | 对实现企业的发展战略起到重要作用。 一旦工作出现失误，会造成战略执行的偏差，或管理成本的陡增，或业务收入骤减， 或重要客户资源丢失，或造成其他重大风险。 |
助理副总、副总、事业部经理 | |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 一旦工作出现失误，会给整个企业的发展造成重大经济损失。 |
中型组织CEO、大型组织的副总 |
<table class="ax-table">
<thead>
<tr>
<th style="width: 80px;">等级</th>
<th>说明</th>
<th>举例</th>
<th style="width: 80px;">选择</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。<br>一旦工作出现失误，会给其他部门的工作带来不便。</td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
<td><span class="ax-iconfont ax-icon-circle ax-color-ignore"></span></td>
</tr>
<tr class="ax-selected">
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。<br>一旦工作出现失误，会造成其他部门工作效率的损失。</td>
<td>部门主管、执行经理</td>
<td><span class="ax-iconfont ax-icon-check-o-fill ax-color-primary"></span></td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。<br>一旦工作出现失误，会造成战略执行的偏差，或管理成本的陡增，或业务收入骤减，<br>或重要客户资源丢失，或造成其他重大风险。</td>
<td>助理副总、副总、事业部经理</td>
<td><span class="ax-iconfont ax-icon-circle ax-color-ignore"></span></td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略，位于企业的决策层。<br>一旦工作出现失误，会给整个企业的发展造成重大经济损失。</td>
<td>中型组织CEO、大型组织的副总</td>
<td><span class="ax-iconfont ax-icon-circle ax-color-ignore"></span></td>
</tr>
</tbody>
</table>
行交替变色
给表格添加ax-stripe或ax-stripe-even即可。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 | 会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table ax-stripe">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。</td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。</td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。</td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略，位于企业的决策层。</td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
鼠标经过行变色
给表格添加ax-hover类即可。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 | 会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table ax-hover">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。</td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。</td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。</td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略，位于企业的决策层。</td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
靠左排列的表格
给table标签添加ax-align-left类即可实现靠左排列的表格。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 | 会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table ax-align-left">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。</td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。</td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。</td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略，位于企业的决策层。</td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
单行超出省略的表格
框架定义了表格td单行内容的最大长度是160px，给td内容添加ax-ell类即可实现单行超出省略。如果160px不是用户想要的宽度，可以直接将width样式写在标签上。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 为其他部门的工作提供服务。 | 会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table ax-align-left">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td><span class="ax-ell">为其他部门的工作提供服务。</span></td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td><span class="ax-ell">对实现企业的发展战略提供支持性服务。</span></td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td><span class="ax-ell">对实现企业的发展战略起到重要作用。</span></td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td><span class="ax-ell">制定企业的发展战略，位于企业的决策层。</span></td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
多行超出省略的表格
框架定义了表格td多行内容的最大长度是60个字符，给td内容添加ax-more-ell类即可实现多行超出省略。
| 等级 | 说明 | 举例 |
|---|---|---|
| A、微小 | 对实现企业的发展战略起到重要作用。一旦工作出现失误，会造成战略执行的偏差，或管理成本的陡增，或业务收入骤减，或重要客户资源丢失，或造成其他重大风险。 |
会计、分析员、一线督导、一线经理、业务员 |
| B、略有 | 对实现企业的发展战略提供支持性服务。 | 部门主管、执行经理 |
| C、中等 | 对实现企业的发展战略起到重要作用。 | 助理副总、副总、事业部经理 |
| D、巨大 | 制定企业的发展战略，位于企业的决策层。 | 中型组织CEO、大型组织的副总 |
<table class="ax-table ax-align-left">
<thead>
<tr>
<th style="width:20%;">等级</th>
<th >说明</th>
<th style="width: 20%">举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td><div class="ax-more-ell" >对实现企业的发展战略起到重要作用。一旦工作出现失误，会造成战略执行的偏差，或管理成本的陡增，或业务收入骤减，或重要客户资源丢失，或造成其他重大风险。</div></td>
<td>会计、分析员、一线督导、一线经理、业务员</td>
</tr>
<tr>
<td>B、略有</td>
<td><span class="ax-ell">对实现企业的发展战略提供支持性服务。</span></td>
<td>部门主管、执行经理</td>
</tr>
<tr>
<td>C、中等</td>
<td><span class="ax-ell">对实现企业的发展战略起到重要作用。</span></td>
<td>助理副总、副总、事业部经理</td>
</tr>
<tr>
<td>D、巨大</td>
<td><span class="ax-ell">制定企业的发展战略，位于企业的决策层。</span></td>
<td>中型组织CEO、大型组织的副总</td>
</tr>
</tbody>
</table>
用户根据自己需要设置字符长度，除了字符长度之外还可以设置按钮的文字和样式，使用方法如下:
<script type="javascript">
$(document).ready(function () {
$(".ax-more-ell").axEll({
textLength: "60",
foldText: "收起",
unfoldText: "全部",
btnClass: "ax-color-primary",
});
});
</script>
带表头提示的表格
| 情形 | 描述 | 回购和转让安排 | 操作 |
|---|---|---|---|
|
激励对象在持有激励股权6年以内，出现以下情形，按照以下方式处理：
|
|||
1、激励对象主动解除劳动关系 |
在劳动合同期内书面辞职 |
按照原始出资价格加每年6%利息回购 |
|
2、激励对象被解除劳动关系 |
因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的 |
按照原始出资价格回购，如果给公司造成损失，赔偿损失 |
|
3、丧失劳动能力并终止劳动关系 |
激励对象因伤病等非工伤的原因 |
按照原始出资价格加每年10%的利息回购 |
|
4、职务变更（仅限于高管） |
职务调整，按照“股随岗走”原则，依据公司的《岗位与激励股权确定细则》确定乙方的激励股权，相应增加或者减少 |
增加激励股权按照新的激励对象处理；减少激励股权按照应减少的激励股权出资额加10%利率回购 |
|
5、退休 |
88退休且不签署《保密及竞业限制协议》 |
按照原始出资价格加每年12%的利息回购 |
|
6、死亡 |
公司股份不能在公开市场自由转让的 |
继承人与公司股东协商转让，如无人受让，则原始出资价格加每年12%的利息回购 |
|
<table class="ax-table ax-border">
<thead>
<tr>
<th style="width: 240px;">情形</th>
<th>描述</th>
<th>回购和转让安排</th>
<th style="width: 100px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="ax-alert ax-warning ax-margin-lr ax-align-left">激励对象在持有激励股权<span class="ax-color-danger">6</span>年以内，出现以下情形，按照以下方式处理：</div>
</td>
</tr>
<tr>
<td><div class="ax-align-left">1、激励对象主动解除劳动关系</div></td>
<td><div class="ax-align-left">在劳动合同期内书面辞职</div></td>
<td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">6%</span>利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">2、激励对象被解除劳动关系</div></td>
<td><div class="ax-align-left">因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的</div></td>
<td><div class="ax-align-left">按照原始出资价格回购，如果给公司造成损失，赔偿损失</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">3、丧失劳动能力并终止劳动关系</div></td>
<td><div class="ax-align-left">激励对象因伤病等非工伤的原因</div></td>
<td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">10%</span>的利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">4、职务变更（仅限于高管）</div></td>
<td><div class="ax-align-left">职务调整，按照“股随岗走”原则，依据公司的《岗位与激励股权确定细则》确定乙方的激励股权，相应增加或者减少</div></td>
<td><div class="ax-align-left">增加激励股权按照新的激励对象处理；减少激励股权按照应减少的激励股权出资额加<span class="ax-color-danger">10%</span>利率回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">5、退休</div></td>
<td><div class="ax-align-left ax-more-ell">88退休且不签署《保密及竞业限制协议》</div></td>
<td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">12</span>%的利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">6、死亡</div></td>
<td><div class="ax-align-left">公司股份不能在公开市场自由转让的</div></td>
<td><div class="ax-align-left">继承人与公司股东协商转让，如无人受让，则原始出资价格加每年<span class="ax-color-danger">12%</span>的利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
</tr>
</tbody>
</table>
带复选的表格
| 部门 | 岗位 | 年度保底 目标(元) |
岗位价值 分数 |
姓名 | 平均年薪 (元) |
阶段考核 结果 |
分配比例 | 分配金额 (元) |
激励股数 | 操作 | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 董事会 | 董事长 | 1000000 | 86 | 马云 | 200000 | 600 | 16% | 20000 | 300000 | |||
| 董事会 | 董事长 | 1000000 | 86 | 马云 | 200000 | 600 | 16% | 20000 | 300000 | |||
| 董事会 | 董事长 | 1000000 | 86 | 马云 | 200000 | 600 | 16% | 20000 | 300000 | |||
| 董事会 | 董事长 | 1000000 | 86 | 马云 | 200000 | 600 | 16% | 20000 | 300000 | |||
| 董事会 | 董事长 | 1000000 | 86 | 马云 | 200000 | 600 | 16% | 20000 | 300000 | |||
|
选择全部
|
||||||||||||
<table class="ax-table ax-border-tb">
<thead>
<tr>
<th style="width:50px;"><input name="" type="checkbox" value=""></th>
<th>部门</th>
<th>岗位</th>
<th>年度保底<br>目标(元)</th>
<th>岗位价值<br>分数</th>
<th>姓名</th>
<th>平均年薪<br>(元)</th>
<th>阶段考核<br>结果</th>
<th>分配比例</th>
<th>分配金额<br>(元)</th>
<th>激励股数</th>
<th style="width:110px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="" type="checkbox" value=""></td>
<td>董事会</td>
<td>董事长</td>
<td><span class="ax-color-warning">1000000</span></td>
<td>86</td>
<td>马云</td>
<td>200000</td>
<td>600</td>
<td>16%</td>
<td>20000</td>
<td>300000</td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
</tr>
<tr class="selected">
<td><input name="" type="checkbox" value=""></td>
<td>董事会</td>
<td>董事长</td>
<td><span class="ax-color-warning">1000000</span></td>
<td>86</td>
<td>马云</td>
<td>200000</td>
<td>600</td>
<td>16%</td>
<td>20000</td>
<td>300000</td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
</tr>
<tr>
<td><label class="ax-checkbox ax-bone"><input type="checkbox" name="star3" value="2" checked><span></span></label></td>
<td>董事会</td>
<td>董事长</td>
<td><span class="ax-color-warning">1000000</span></td>
<td>86</td>
<td>马云</td>
<td>200000</td>
<td>600</td>
<td>16%</td>
<td>20000</td>
<td>300000</td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" 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>董事会</td>
<td>董事长</td>
<td><span class="ax-color-warning">1000000</span></td>
<td>86</td>
<td>马云</td>
<td>200000</td>
<td>600</td>
<td>16%</td>
<td>20000</td>
<td>300000</td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
</tr>
<tr>
<td><input name="" type="checkbox" value=""></td>
<td>董事会</td>
<td>董事长</td>
<td><span class="ax-color-warning">1000000</span></td>
<td>86</td>
<td>马云</td>
<td>200000</td>
<td>600</td>
<td>16%</td>
<td>20000</td>
<td>300000</td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="13">
<div class="ax-flex-row">
<div class="ax-flex-block ax-align-left">选择全部</div>
<div class="ax-flex-block ax-align-right"><a href="###" class="ax-btn ax-primary ax-xs">批量删除</a></div>
<span class="ax-gutter"></span>
</div>
</td>
</tr>
</tfoot>
</table>
带按钮和操作的表格
<table class="ax-table ax-border">
<thead>
<tr>
<th><div class="ax-align-left">项目名称</div></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><div class="ax-align-left"><a href="###" class="ax-ell"><span class="ax-iconfont ax-icon-email-fill"></span> 张宇凡2017年虚拟股激励个人目标责任书</a></div></td>
<td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></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-fill" title="查看"></span></a>
<a href="###" class="ax-btn ax-xs ax-primary ax-icon"><span class="ax-iconfont ax-icon-eye-fill" title="查看"></span></a>
</td>
</tr>
<tr>
<td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-theme-fill"></span> <span>张宇凡2016年虚拟股激励个人目标责任书</span></a></div></td>
<td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head02.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a></td>
<td><span class="ax-iconfont ax-icon-check-o-fill 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-fill" title="查看"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-pie-fill"></span> <span>张宇凡2015年虚拟股激励个人目标责任书</span></a></div></td>
<td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head03.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a></td>
<td><span class="ax-iconfont ax-icon-check-o-fill 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-fill" title="查看"><span class="ax-dot ax-bg-danger"></span></a><a href="###" class="ax-iconfont ax-icon-editing-fill ax-color-forbid" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-file-text-fill"></span> <span>张宇凡2014年虚拟股激励个人目标责任书</span></a></div></td>
<td><a href="###" class="ax-avatar ax-xxs ax-radius" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head04.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></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-fill" title="查看"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-plus-s-fill"></span> <span>张宇凡2017年虚拟股激励个人目标责任书</span></a></div></td>
<td><a href="###" class="ax-avatar ax-xxs ax-radius" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head05.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a></td>
<td><span class="ax-iconfont ax-icon-check-o-fill 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-fill" title="查看"></a></div></td>
</tr>
</tbody>
</table>
表单
在table中的表单控件均使用ax-xs尺寸，另外对ax-form-group包裹的input采用自适应宽度的办法，对td/th直接子元素input和select采用固定120px的方法，当然用户可行内定义表单元素宽度。
<table class="ax-table ax-border ax-align-left">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
<th>年级</th>
<th style="width:80px;">操作</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-danger 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-danger 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-danger ax-xs">删除</a>
</td>
</tr>
</tbody>
</table>
基本排序
借助list.js插件实现表格的表头排序。要求：1、给table添加id；2、表头添加class="sort" data-sort="*"；3、tbody添加class="list"。list.js的用法请点击这里。如果需要创建大型数据表格并使用更复杂的操作，建议使用datatables插件，详情请点击这里。
| 顺序 | 朝代 | 存在时间 |
|---|---|---|
| A | 唐朝 | 274年 |
| B | 宋朝 | 319年 |
| C | 元朝 | 97年 |
| D | 明朝 | 276年 |
-
<script src="src/plugins/list/list.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { var options01 = { valueNames: [ 'no', 'dynasty','life' ], }; var list01 = new List('list01', options01); }); </script> -
<table class="ax-table ax-stripe" id="list01"> <thead> <tr> <th class="sort" data-sort="no"><span>顺序</span></th> <th class="sort" data-sort="dynasty"><span>朝代</span></th> <th class="sort" data-sort="life"><span>存在时间</span></th> </tr> </thead> <tbody class="list"> <tr> <td class="no">A</td> <td class="dynasty">唐朝</td> <td class="life" >274年</td> </tr> <tr> <td class="no">B</td> <td class="dynasty">宋朝</td> <td class="life" >319年</td> </tr> <tr> <td class="no">C</td> <td class="dynasty">元朝</td> <td class="life" >97年</td> </tr> <tr> <td class="no">D</td> <td class="dynasty">明朝</td> <td class="life" >276年</td> </tr> </tbody> </table>