华佗健康网

全部频道

首页养生问答疾病百科养生资讯女性养生男性养生

您的当前位置：首页正文

推荐一篇利用th,colgroup,col定义表格样式_经验交流

2020-11-27 来源：华佗健康网

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

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;

抛砖引玉，更多效果就由你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需刷新才能执行]

显示全文