分类目录 共计收录4274站; 资讯文章4395篇; 待审网站 637站; 当月收录0站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

表格的一些样式设置代码

.table-border 带水平线

表头表头表头
类别表格内容表格内容
类别表格内容表格内容
类别表格内容表格内容
<table class="table table-border">  ...</table>

.table-bg th带背景

表头表头表头
类别表格内容表格内容
类别表格内容表格内容
类别表格内容表格内容
<table class="table table-border table-bg">  ...</table>

.table-bordered 带外边框

表头表头表头
类别表格内容表格内容
类别表格内容表格内容
类别表格内容表格内容
<table class="table table-border table-bordered">  ...</table>

.radius 圆角

表头表头表头
类别表格内容表格内容
类别表格内容表格内容
类别表格内容表格内容
<table class="table table-border table-bordered radius">  ...</table>

.table-striped 奇数行背景设为浅灰色

表头表头表头
类别表格内容表格内容
类别表格内容表格内容
类别表格内容表格内容
<table class="table table-border table-bordered table-striped">  ...</table>

.table-hover 鼠标悬停样式

表头表头表头
类别表格内容表格内容
类别表格内容表格内容
类别表格内容表格内容
<table class="table table-border table-bordered table-hover">  ...</table>

定义颜色

Class描述
.active悬停在行
.success成功或积极
.warning警告或出错
.danger危险
<table class="table table-border table-bg table-bordered">  <thead>    <tr><th width="20%">Class</th><th>描述</th></tr>  </thead>  <tbody>    <tr class="active"><th>.active</th><td>悬停在行</td></tr>    <tr class="success"><th>.success</th><td>成功或积极</td></tr>    <tr class="warning"><th>.warning</th><td>警告或出错</td></tr>    <tr class="danger"><th>.danger</th><td>危险</td></tr>  </tbody></table>

对齐方式

对齐方式类名
居左默认
居中.text-c
居右.text-r
<table class="table table-border table-bordered"> 
 <thead class="text-c">
  <tr>      
 <th>对齐方式</th>     
  <th>类名</th>    
  </tr>  </thead> 
   <tbody>   
    <tr>     
     <td>居左</td>      
     <td>默认</td>    
     </tr>    
     <tr class="text-c">      
     <td>居中</td>      
     <td>.text-c</td>    
     </tr>    
     <tr class="text-r">      
     <td>居右</td>      
     <td>.text-r</td>    
     </tr> 
      </tbody></table>

友情提示:可以给tr整行加,也可以单独给td 或者th 设置mEh网站目录

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

mEh网站目录

社交帐号登录:mEh网站目录


  • mEh网站目录


mEh网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->