定义表格各列的样式,不用每个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了!
您可能感兴趣的文章:- 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
- srcElement表格样式
- repeater、gridview 在绑定时判断判断显示不同的行样式或文本
- js奇偶数判断的代码
- jquery实现表格奇数偶数行不同样式(有图为证及实现代码)