推荐一篇利用th,colgroup,col定义表格样式-巨人网络通讯

定义表格各列的样式，不用每个td都在那里加一堆的Class，利用th,colgroup,col等属性，轻松搞定^_^
代码如下：

复制代码代码如下:

style> 
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; 
} 
/style> 
table class="Demo"> 
  tr> 
    th>TagName/th> 
    th>ClassName/th> 
    th>CSS/th> 
  /tr> 
  colgroup> 
    col class="Col1" /> 
    col class="Col2" /> 
    col class="Col3" /> 
  /colgroup> 
  tr> 
    td>table/td> 
    td>Demo/td> 
    td>border-collapse: collapse;br />color: #454545;br />font: 11px/150% Verdana, Arial, Helvetica, sans-serif;/td> 
  /tr> 
  tr> 
    td>th/td> 
    td>/td> 
    td>padding: 3px 7px;br />border: 1px solid #f60;br />border-width: 2px 1px 1px;br />background: #ffffe1;/td>  
  /tr> 
  tr> 
    td>td/td> 
    td>/td> 
    td>padding: 3px 7px;br />border: 1px solid #f60;/td> 
  /tr> 
  tr> 
    td>col/td> 
    td>Col1/td> 
    td>text-align: right;br />background: #f5f5f5;/td> 
  /tr> 
  tr> 
    td>col/td> 
    td>Col2/td> 
    td>color: #00c;/td> 
  /tr> 
  tr> 
    td>col/td> 
    td>Col3/td> 
    td>font-style: italic;/td> 
  /tr> 
/table>

抛砖引玉，更多效果就由你DIY了！

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

一个简单但常用的javascript表格样式_鼠标划过行变色简洁实现
srcElement表格样式
repeater、gridview 在绑定时判断判断显示不同的行样式或文本
js奇偶数判断的代码
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

全 部 栏 目

全部栏目