Tab 对齐方式

来源:互联网 发布:java中main函数 编辑:程序博客网 时间:2024/04/19 18:20

这里写图片描述

tab代码

对齐方式 类名 居左 默认 居中 .text-c 居右 .text-r

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

0 0
原创粉丝点击