Define the style of each column in the table, not each TD is there to add a bunch of class, using Th,colgroup,col and other attributes, easy to handle ^_^
The code is as follows:
Copy Code code as follows:
<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/>backgroun D: #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>
For more results, 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"/> <col clas s= "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&G T <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 All SELECT Note: If the need to introduce external JS need to refresh to perform]