时间:2021-05-18
定义表格各列的样式,不用每个td都在那里加一堆的Class,利用th,colgroup,col等属性,轻松搞定^_^
代码如下:
复制代码 代码如下:
<style>
table.Demo{
border-collapse:collapse;
color:#454545;
font:11px/150%Verdana,Arial,Helvetica,sans-serif;
}
table.Demoth{
padding:3px7px;
border:1pxsolid#f60;
border-width:2px1px1px;
background:#ffffe1;
}
table.Demotd{
padding:3px7px;
border:1pxsolid#f60;
}
table.Democol.Col1{
text-align:right;
background:#f5f5f5;
}
table.Democol.Col2{
color:#00c;
}
table.Democol.Col3{
font-style:italic;
}
</style>
<tableclass="Demo">
<tr>
<th>TagName</th>
<th>ClassName</th>
<th>CSS</th>
</tr>
<colgroup>
<colclass="Col1"/>
<colclass="Col2"/>
<colclass="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:3px7px;<br/>border:1pxsolid#f60;<br/>border-width:2px1px1px;<br/>background:#ffffe1;</td>
</tr>
<tr>
<td>td</td>
<td></td>
<td>padding:3px7px;<br/>border:1pxsolid#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了!
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; } 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; [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
昨天的《利用th,colgroup,col定义表格样式》中,细心点的朋友会发现加了一个“运行代码”的链接:直接点击可以运行Textarea中的内容。其实本身蓝色
二、创建样式日历显示的表格线,使用Cell填充图形的边框来实现,为了统一,我们先定义边框线的颜色及线条精细。另外还要定义一系统填充样式等。创建color:col
word添加目录样式的方法如下: 1、定义目录标题的样式,先选定文章中的任意一篇的标题,对标题进行字体、字号、加粗、颜色等字体格式的定义及居中、左右缩进、行距
上一篇Bootstrap自定义文件上传下载样式()已经有一段时间了,一直在考虑怎么样给大家提交一篇完美的逻辑处理功能。现在我结合自己的实际工作给大家分享一下。使
简单的带图的一篇文章CSS样式实例来体验CSS,以下是页面代码:简单的带图的一篇文章CSS样式body{padding:0px;margin:0px;bac