定義表格各列的樣式,不用每個td都在那里加一堆的Class,利用th,colgroup,col等屬性,輕松搞定^_^
代碼如下:
復(fù)制代碼 代碼如下:
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表格樣式_鼠標(biāo)劃過行變色 簡潔實現(xiàn)
- srcElement表格樣式
- repeater、gridview 在綁定時判斷判斷顯示不同的行樣式或文本
- js奇偶數(shù)判斷的代碼
- jquery實現(xiàn)表格奇數(shù)偶數(shù)行不同樣式(有圖為證及實現(xiàn)代碼)