Define the style for each column of the table, without having to add a bunch of classes to each TD, and take advantage of Th,colgroup,col and other attributes to easily fix ^_^
The code is as follows:
Copy CodeThe code is as follows:
| 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; |
To stimulate, more effect by you 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"/&G T <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, Helve TICA, sans-serif;</td> </tr> <tr> <td>th</td> <td></td> <td>padding:3px 7px;border:1px solid #f60; border-width:2px 1px 1px;ba Ckground: #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& Gt;col</td> <td>Col2</td> <td>color: #00c;</td> </tr> <tr> <t d>col</td> <td>Col3</td> <td>font-style:italic;</td> </tr> </table> ;
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
