推荐一篇利用th,colgroup,col定义表格样式

定义表格各列的样式，不用每个td都在那里加一堆的Class，利用th,colgroup,col等属性，轻松搞定^_^

代码如下：

复制代码代码如下:

<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了！

<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需再刷新一下页面才能执行]

微信