We recommend that you use th, colgroup, and col to define the style of each column in the table. You do not need to add a bunch of classes to each td, and use attributes such as th, colgroup, and col, easy to handle ^_^
The Code is as follows:
The 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; |
More results are yours!
<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; 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> <td> th </td> <td> padding: 3px 7px; border: 1px solid # f60; border-width: 2px 1px 1px; background: # ffffe1; </td> </tr> <td> td </td> <td> padding: 3px 7px; border: 1px solid # f60; </td> </tr> <td> col </td> <td> Col1 </td> <td> text-align: right; background: # f5f5f5; </td> </tr> <td> col </td> <td> Col2 </td> <td> color: # 00c; </td> </tr> <td> col </td> <td> Col3 </td> <td> font-style: italic; </td> </tr> </table>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]