html表格ui,table表格 - 基础 - H-ui前端框架官方网站-优快云博客

本文介绍了多种表格样式的实现方法，包括默认样式、带水平线、带背景等，并提供了鼠标悬停、奇数行背景色变化等交互效果的CSS代码。此外还详细解释了如何通过不同的Class来定义表格的颜色状态，如成功、警告和危险状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格

系统默认表格

表头

类别

表格内容

类别

表格内容

类别

表格内容

...

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