Table表格
纯css的table表格，支持多种风格，支持简单的冻结头部和两侧
简单表格
原始表格已经做了reset处理，直接使用原生的table、tr、th、td标签即可。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
边框类型
使用lines属性展示边框，lines=outer表示外侧追加一个边框，将整个表格包裹起来；lines=all则是将整个table转为excel单元格的形态；lines=inner则不使用外边，只保留内部tr的边框。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
自定义边框
我们使用lines="inner"定义一个无外边的表格，再使用一个外容器包裹表格，并对外容器定义边框、圆角和阴影等样式，如此可创建一个带自定义风格的表格。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 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标签或th、td标签添加selected属性即可实现行被选中样式。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 状态 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
鼠标经过变色
给表格添加hoverable属性即可。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
禁用
给表格的tr节点或th、td节点添加disabled属性即可。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
聚焦
给td节点追加focused属性可表示该单元格处于聚焦状态。可以与focusable属性共同使用。
- 输出
- 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组件。
关于ax-callout组件用法，请点击这里。
- 输出
- HTML
-
序号 所在城市 校名 办学层次 “高等学校”是大学、专门学院、高等职业技术学院、高等专科学校的统称，简称高校。 64 北京市 北京警察学院 本科 66 北京市 中国科学院大学 本科 68 北京市 北京工业职业技术学院 专科 92 北京市 北京网络职业学院 专科 95 天津市 天津科技大学 本科 96 天津市 天津工业大学 本科 -
静态功能性表格
可以利用原生标签或框架内的组件构建多功能但静态的表格。
- 输出
- HTML
多种元素
可以在表格中嵌入各种框架内的元素。
- 输出
- HTML
-
列1 列2 列3 列4 列5 列6 列7 列8 列9 列10 列11 列12 列13 天津市 
-
自适应宽度
大型表格在手机和平板端的显示效果差强人意，如果不进行滚动处理，那么所有内容都将拥挤在一起。
为此，我们需要专门针对移动设备设置表格的宽度。
通过内置的css变量控制不同终端下表格宽度（表格的高度不需要设置）：
- _xxs-w：手机端下的宽度
- _xs-w：平板端下的宽度
- _sm-w：平板横版下的宽度
- _md-w：笔记本电脑的宽度
- _lg-w：台式机的宽度
- _xl-w：超大屏幕的宽度
演示示例
默认
平板竖
手机竖
滚动容器
表格数据过多会导致表格撑开父节点，继而导致整个页面发生滚动。此时应该使用滚动容器以限制滚动范围。
关于滚动容器可查看关于_scroller章节的文章。
- 输出
- 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余名 -
内容不换行
如果希望表格被内容撑开，可追加nowrap属性，这样对单元格的直接内容不做换行处理；此时通常需要使用滚动容器。
- 输出
- 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余名 -
宽度最大化
与nowrap属性类似的属性是widest，该属性将单元格的元素全部转成行内元素，获得内容最大宽度后对表格进行宽度最大化处理。此时通常需要使用滚动容器。
他们两者不同之处是：nowrap只对单元格的直接内容有效，而widest则对单元格中的所有子节点有效。
- 输出
- 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余名 -
冻结行列
不使用js情况下，可实现三种冻结方式，即最左一列冻结，最右一列冻结和表头冻结。请参考示例按如下步骤操作：
- 将table使用
_table-wrap包裹 - 对_table-wrap使用
fixed属性，值可填head、left或right，也可填多个值 - 如果需要左右冻结，需要将table的宽度值设置大于容器宽度，如果表格足够宽可使用
nowrap或widest属性让单元格不换行 - 如果需要头部冻结，需要将
_table-wrap的高度值设置大于table高度（可通过变量--_table-wrap-h设置高度） - 如果需要使用网格线，对table表格追加
lines=all/outer属性
- 输出
- 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 -
lines=outer情况。
- 输出
- 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 -
lines=all情况。
- 输出
- 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 -
line=inner情况。
- 输出
- 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 -
