表格以多列的形式分行呈现业务对象的各种数据。可以使用表格来呈现那些会动态变化的数据内容,便于快速引用和分析。
样例
默认表格
css配置
.module .table{padding:5px 0px 10px 0px;}
.table-head th, .table-foot th{display:inline-block;font-size:12px;padding:6px 5px;height:30px;line-height:20px;font-weight:100;}
display:inline-block;border:0px none;border-left:1px solid #dedfde;padding:5px;overflow:hidden;font:normal 12px/1.5em arial,”宋体”; color:#787878;}
.grid-head .grid-col-checkbox .fi:before{color:#e0e6e8;}
.grid-head .grid-col-checkbox .form-clickbox[selected] .fi:before {color:#7ECEF4;}
.caret-down.selected {border-top-color:#7ECEF4;}
.table-body > tbody > tr:nth-child(2n){background-color:#f8f8f8;}
table-head tr {background-color:#f7f7f7;border-top:1px solid #CECECE;border-bottom:2px solid #e6e6e6;}
.table-body > tbody > tr {border-top:1px solid #e6e6e6;}
.grid .grid-col-checkbox {width:30px;text-align:center;background-color:#f7f7f7;}
.iconfont{color:#b7b7b7;font-size:16px;}
说明
表格内边距上5像素、下10像素;
表头内容作为块对象、内边距上下6像素、字体大小12像素、左右5像素、高30像素、行高20像素、文字水平居中显示、字体不加粗;
表格内内容作为块对象、左边描边1像素、内边距5像素、字体宋体、颜色#787878;
表头勾选框颜色#e0e6e8;
表头勾选框选中颜色#7ECEF4;
表头排序箭头选中颜色#7ECEF4;
间隔行背景颜色#f8f8f8
表头背景颜色#f7f7f7、描边上1像素、右2像素
表格行上描边1像素
勾选框栏宽度30像素、居中显示、背景颜色#f7f7f7
表格操作图标颜色#b7b7b7、大小16像素
悬停表格
css配置
.table-body > tbody > tr:hover{background-color:#e7f3ff;}
说明
表格悬停行背景颜色#e7f3ff;