html表格ui,table表格 - 基础 - H-ui前端框架官方网站
表格
系统默认表格
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
.table H-ui默认
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
.table-border 带水平线
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
.table-bg th带背景
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
.table-bordered 带外边框
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
.radius 圆角
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
.table-striped 奇数行背景设为浅灰色
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
.table-hover 鼠标悬停样式
表头
表头
表头
类别
表格内容
表格内容
类别
表格内容
表格内容
类别
表格内容
表格内容
...
定义颜色
Class
描述
.active
悬停在行
.success
成功或积极
.warning
警告或出错
.danger
危险
Class描述
.active悬停在行.success成功或积极.warning警告或出错.danger危险对齐方式
对齐方式
类名
居左
默认
居中
.text-c
居右
.text-r
对齐方式类名
居左默认居中.text-c居右.text-r友情提示：可以给tr整行加，也可以单独给td 或者th 设置
CSS代码/*默认table*/
table{width:100%;empty-cells:show;background-color:transparent;border-collapse:collapse;border-spacing:0}
table th{text-align:left; font-weight:400}
/*带水平线*/
.table th{font-weight:bold}
.table th,.table td{padding:8px;line-height:20px}
.table td{text-align:left}
.table tbody tr.success > td{background-color:#dff0d8}
.table tbody tr.error > td{background-color:#f2dede}
.table tbody tr.warning > td{background-color:#fcf8e3}
.table tbody tr.info > td{background-color:#d9edf7}
.table tbody + tbody{border-top:2px solid #ddd}
.table .table{background-color:#fff}
/*带横向分割线*/
.table-border{border-top:1px solid #ddd}
.table-border th,.table-border td{border-bottom:1px solid #ddd}
/*th带背景*/
.table-bg thead th{background-color:#F5FAFE}
/*带外边框*/
.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd}
.table-border.table-bordered{border-bottom:0}
/*奇数行背景设为浅灰色*/
.table-striped tbody > tr:nth-child(odd) > td,.table-striped tbody > tr:nth-child(odd) > th{background-color:#f9f9f9}
/*竖直方向padding缩减一半*/
.table-condensed th,.table-condensed td{padding:4px 5px}
/*鼠标悬停样式*/
.table-hover tbody tr:hover td,.table-hover tbody tr:hover th{background-color: #f5f5f5}
/*定义颜色*/
/*悬停在行*/
.table tbody tr.active,.table tbody tr.active>td,.table tbody tr.active>th,.table tbody tr .active{background-color:#F5F5F5!important}
/*成功或积极*/
.table tbody tr.success,.table tbody tr.success>td,.table tbody tr.success>th,.table tbody tr .success{background-color:#DFF0D8!important}
/*警告或出错*/
.table tbody tr.warning,.table tbody tr.warning>td,.table tbody tr.warning>th,.table tbody tr .warning{background-color:#FCF8E3!important}
/*危险*/
.table tbody tr.danger,.table tbody tr.danger>td,.table tbody tr.danger>th,.table tbody tr .danger{background-color:#F2DEDE!important}
/*表格文字对齐方式，默认是居左对齐*/
.table .text-c th,.table .text-c td{text-align:center}/*整行居中*/
.table .text-r th,.table .text-r td{text-align:right}/*整行居右*/
.table th.text-l,.table td.text-l{text-align:left!important}/*单独列居左*/
.table th.text-c,.table td.text-c{text-align:center!important}/*单独列居中*/
.table th.text-r,.table td.text-r{text-align:right!important}/*单独列居右*/