您现在的位置是:门户> 编程语言> HTML/CSS

推荐一篇利用th,colgroup,col定义表格样式
2020-03-03 61人围观 0条评论
简介推荐一篇利用th,colgroup,col定义表格样式
    定义表格各列的样式,不用每个td都在那里加一堆的Class,利用th,colgroup,col等属性,轻松搞定^_^
    代码如下:
    复制代码 代码如下:


    table.Demo {
      border-collapse: collapse;
      color: #454545;
      font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
    }
    table.Demo th {
      padding: 3px 7px;
      border: 1px solid #f60;
      border-width: 2px 1px 1px;
      background: #ffffe1;
    }
    table.Demo td {
      padding: 3px 7px;
      border: 1px solid #f60;
    }
    table.Demo col.Col1 {
      text-align: right;
      background: #f5f5f5;
    }
    table.Demo col.Col2 {
      color: #00c;
    }
    table.Demo col.Col3 {
      font-style: italic;
    }


      
        TagName
        ClassName
        CSS
      
      
        
        
        
      
      
        table
        Demo
        border-collapse: collapse;color: #454545;font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
      
      
        th
        
        padding: 3px 7px;border: 1px solid #f60;border-width: 2px 1px 1px;background: #ffffe1; 
      
      
        td
        
        padding: 3px 7px;border: 1px solid #f60;
      
      
        col
        Col1
        text-align: right;background: #f5f5f5;
      
      
        col
        Col2
        color: #00c;
      
      
        col
        Col3
        font-style: italic;
      


    抛砖引玉,更多效果就由你DIY了!
    table.Demo { border-collapse: collapse; color: #454545; font: 11px/150% Verdana, Arial, Helvetica, sans-serif; } table.Demo th { padding: 3px 7px; border: 1px solid #f60; border-width: 2px 1px 1px; background: #ffffe1; } table.Demo td { padding: 3px 7px; border: 1px solid #f60; } table.Demo col.Col1 { text-align: right; background: #f5f5f5; } table.Demo col.Col2 { color: #00c; } table.Demo col.Col3 { font-style: italic; }
    TagName ClassName CSS
    table Demo border-collapse: collapse; color: #454545; font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
    th padding: 3px 7px; border: 1px solid #f60; border-width: 2px 1px 1px; background: #ffffe1;
    td padding: 3px 7px; border: 1px solid #f60;
    col Col1 text-align: right; background: #f5f5f5;
    col Col2 color: #00c;
    col Col3 font-style: italic;

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

分享:

文章评论