搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > CSS教程
    表格的一些样式设置代码
        发布时间:2015-11-24 08:47:20    发布作者:admin

    .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 设置ZwW三九网站目录

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

    ZwW三九网站目录

    社交帐号登录:ZwW三九网站目录


    • ZwW三九网站目录


    ZwW三九网站目录

    最新资讯
    最新收录
    热门资讯