定義表格各列的樣式，不用每個td都在那裡加一堆的Class，利用th,colgroup,col等屬性，輕鬆搞定^_^
代碼如下：
複製代碼 代碼如下:
| 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了！
<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;color: #454545;font: 11px/150% Verdana, Arial, Helvetica, sans-serif;</td> </tr> <tr> <td>th</td> <td></td> <td>padding: 3px 7px;border: 1px solid #f60;border-width: 2px 1px 1px;background: #ffffe1;</td> </tr> <tr> <td>td</td> <td></td> <td>padding: 3px 7px;border: 1px solid #f60;</td> </tr> <tr> <td>col</td> <td>Col1</td> <td>text-align: right;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>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
