Table表格
纯css的table表格，支持多种风格，支持简单的冻结头部和两侧
前言
默认文本自动继承了body的主色，并没有其他装饰，为了便捷使用特色文本，本框架设计了若干有关文本的样式。
简单表格
原始表格已经做了reset处理，直接使用原生的table、tr、th、td标签即可。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
表格美化
如果希望本框架来完全接管table外观和功能，可对table使用_table样式类，并搭配以下方法即可获得外观表现良好的的表格组件。
两种边框方式
使用display属性展示边框，display=border表示外侧追加一个边框，将整个表格包裹起来；display=grid则是将整个table转为excel单元格的形态。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
行交替变色
给表格添加stripe属性表格行将对奇数行使用浅色背景色，等效于stripe=odd；如果需要对偶数行使用浅色背景色可使用stripe=even。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
被选中的表格
给表格的tr标签添加selected属性即可实现行被选中样式。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 状态 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
鼠标经过变色
给表格添加hoverable属性即可。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
禁用
给表格的tr节点或td节点添加disabled属性即可。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
行文排列方式
对table直接使用style="align:center"即可居中排列，当然我们可以使用框架内的样式类：
- _a-l：左对齐
- _a-r：右对齐
- _a-c：居中对齐
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
行省略
对内容子节点使用_ell或_ell-*样式类即可实现单行或多行省略。
_table下的_ell/_ell-*有默认的最大宽度：16rem（160px），可通过修改_table下的变量--_table-ell来调整行省略最大宽度值。
- 输出
- HTML
-
单行省略
序号 所在城市 校名 办学层次 简介 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余名 多行省略
序号 所在城市 校名 办学层次 简介 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余名 -
使用More组件
如果既希望文本省略，又希望能看到所有文本内容，可使用ax-more组件。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 简介 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余名 -
表头提示
如果既希望显示一段全宽的提示内容，可使用对td节点使用colspan属性以展开整个行，并插入ax-callout组件。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 “高等学校”是大学、专门学院、高等职业技术学院、高等专科学校的统称，简称高校。 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
静态功能性表格
如果既希望显示一段全宽的提示内容，可使用对td节点使用colspan属性以展开整个行，并插入ax-callout组件。
- 输出
- HTML
冻结行列
不使用js情况下，可实现三种冻结方式，即最左一列冻结，最右一列冻结和表头冻结。请参考示例按如下步骤操作：
- 将table使用
_table-wrap包裹 - 对_table-wrap使用
fixed属性，值可填head、left或right，也可填多个值 - 如果需要左右冻结，需要将table的宽度值设置大于容器宽度，如果表格足够宽可使用
nowrap属性让单元格不换行 - 如果需要头部冻结，需要将
_table-wrap的高度值设置大于table高度 - 如果需要使用网格线，即使用
display=grid/border需要应用在_table-wrap上
- 输出
- HTML
-
日期 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 -
