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

ttx9n · 发表于 2007-4-4 00:00:00

定义表格各列的样式，不用每个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了！

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

hd1tvqb3 · 发表于 2022-8-28 11:22:14

看看看看看看看看看看看看看看看看看看看看看看看看看看看

kestlhoxn · 发表于 2022-12-10 10:55:31

来看看怎么样

123456 · 发表于 2023-8-6 22:45:38

刷屏刷屏刷屏

pwseqn1h · 发表于 2023-11-13 21:31:03

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

thywok · 发表于 2024-3-8 02:52:02

看看看看看看看看看看看看看看看看看看看看看看看看看看看

ppwxcg · 发表于 2024-7-5 10:12:01

感谢楼主分享

uj9lpc · 发表于 2024-7-19 21:47:01

还有人在不。。。。。。。。。。啊

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] 推荐一篇利用th,colgroup,col定义表格样式

相关帖子