推荐一篇利用th,colgroup,col定义表格样式__table_Demo_background_1px_padding_

当前位置: 编程技术>WEB前端

推荐一篇利用th,colgroup,col定义表格样式

来源: 互联网发布时间：2014-09-06

本文导语: 定义表格各列的样式，不用每个td都在那里加一堆的Class，利用th,colgroup,col等属性，轻松搞定^_^ 代码如下：代码如下: table.Demo { border-collapse: collapse; color: #454545; font: 11px/150% Verdana, Arial, Helvetica, sans-serif; } table.Dem...

定义表格各列的样式，不用每个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需刷新才能执行]

您可能感兴趣的文章:

本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。