表格

系统默认表格

表头

表头

表头

类别

表格内容

表格内容

类别

表格内容

表格内容

类别

表格内容

表格内容

...

.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}/*单独列居右*/