html表格ui,table表格 - 基础 - H-ui前端框架官方网站
表格
系統(tǒng)默認(rèn)表格
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
.table H-ui默認(rèn)
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
.table-border 帶水平線
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
.table-bg th帶背景
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
.table-bordered 帶外邊框
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
.radius 圓角
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
.table-striped 奇數(shù)行背景設(shè)為淺灰色
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
.table-hover 鼠標(biāo)懸停樣式
表頭
表頭
表頭
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
類別
表格內(nèi)容
表格內(nèi)容
...
定義顏色
Class
描述
.active
懸停在行
.success
成功或積極
.warning
警告或出錯(cuò)
.danger
危險(xiǎn)
Class描述
.active懸停在行.success成功或積極.warning警告或出錯(cuò).danger危險(xiǎn)對(duì)齊方式
對(duì)齊方式
類名
居左
默認(rèn)
居中
.text-c
居右
.text-r
對(duì)齊方式類名
居左默認(rèn)居中.text-c居右.text-r友情提示：可以給tr整行加，也可以單獨(dú)給td 或者th 設(shè)置
CSS代碼/*默認(rèn)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}
/*奇數(shù)行背景設(shè)為淺灰色*/
.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}
/*鼠標(biāo)懸停樣式*/
.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}
/*警告或出錯(cuò)*/
.table tbody tr.warning,.table tbody tr.warning>td,.table tbody tr.warning>th,.table tbody tr .warning{background-color:#FCF8E3!important}
/*危險(xiǎn)*/
.table tbody tr.danger,.table tbody tr.danger>td,.table tbody tr.danger>th,.table tbody tr .danger{background-color:#F2DEDE!important}
/*表格文字對(duì)齊方式，默認(rèn)是居左對(duì)齊*/
.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}/*單獨(dú)列居左*/
.table th.text-c,.table td.text-c{text-align:center!important}/*單獨(dú)列居中*/
.table th.text-r,.table td.text-r{text-align:right!important}/*單獨(dú)列居右*/
總結(jié)
以上是生活随笔為你收集整理的html表格ui,table表格 - 基础 - H-ui前端框架官方网站的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leetcode--225. 用队列实现
- 下一篇： 前端实战：仿写小米官网第一天