推荐一篇利用th,colgroup,col定义表格样式
2007-04-04 00:00
405 查看
定义表格各列的样式,不用每个td都在那里加一堆的Class,利用th,colgroup,col等属性,轻松搞定^_^
代码如下:
抛砖引玉,更多效果就由你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需刷新才能执行]
代码如下:
<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了!
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需刷新才能执行]
相关文章推荐
- 推荐一篇利用th,colgroup,col定义表格样式
- 利用项目符号和样式无需表格建立菜单菜单
- 利用display属性写出表格的布局样式
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
- html+css 单独给某一表格定义样式
- 源码推荐:仿写映客直播 ,快速切换主题 ,星星评分控件,表格样式,可以横向移动的表格, 仿微信键盘-
- 利用display属性写出表格的布局样式
- 比较完整的CSS定义表格样式
- 利用CSS进行表单样式定义
- SELECT INPUT的一种样式定义 注意select放在表格内外在样式的区别
- css定义表格样式
- html实线边框的表格样式定义
- 利用CSS进行表单样式定义
- 利用itext导出word表格,处理图片 推荐
- 57-004-1 bootstrap定义一个导航页面包括bootstrap面板,表格,分页,胶囊导航等样式
- CSS定义表格样式
- 利用 CSS selector 改变悬停表格样式
- 用标准的CSS定义你的表格样式
- html标签的表格的tbody、tfoot、thead、colgroup、th、tr、td、table
- 利用sirius定义图形样式