当前位置： 移动技术网 > IT编程>网页制作>CSS > 推荐一篇利用th,colgroup,col定义表格样式

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

2017年12月12日  | 移动技术网IT编程  | 我要评论
定义表格各列的样式，不用每个td都在那里加一堆的class，利用th,colgroup,col等属性，轻松搞定^_^ 代码如下：复制代码 代码如下:<style>
定义表格各列的样式，不用每个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需刷新才能执行]

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网