css3 条纹化和透明化表格
来源:互联网 发布:python后端开发入门 编辑:程序博客网 时间:2024/04/27 22:27
使用class来条纹化表格,需要在html中将表格中每一行都按<tr><td></td></tr>写出,非常麻烦。
CSS3中的伪类渲染更能很好地定位页面元素。
然而有时即使你按照css3格式来写,在浏览器中却显示不出相应的效果,这时就需要考虑浏览器的兼容问题。
目前,全盘支持 CSS3 属性的浏览器有 Chrome 和 Safari,而且不管是 Mac 平台还是 Windows 平台全支持。
各种浏览器兼容情况详情可见:http://tools.yesky.com/101/11197101.shtml
博主先用IE没有成功,后用Firefox成功。
现附上条纹化表格的代码:
html:
<table> <thead> <tr> <th>Synonym</th> <th>Cosine</th> </tr> </thead> <tbody> {% for w in words %} <tr> <td>{{ w.0}}</td><td>{{ w.1}}</td> </tr> {% endfor %} </tbody> </table>
css:rbga(,,,)最后一个参数是调整透明度
rbga颜色值详情见链接:http://www.zhangxinxu.com/wordpress/?p=1064
table{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:70%; border-collapse:collapse; position:relative; left:50px; }thead th{ font-size:1.2em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#663366; color:#ffffff; border:1px solid #990099; padding:3px 7px 2px 7px; }tbody tr,td{ font-size:1em; border:1px solid #990099; padding:3px 7px 2px 7px; }tbody tr:nth-of-type(even){ background-color:rgba(138,43,226,0.2);}tbody tr:nth-of-type(odd){ background-color:rgba(169,169,169,0.2);}
最后的效果图:
0 0
- css3 条纹化和透明化表格
- css3 制作条纹背景
- Bootstrap3 表格-条纹状表格
- css3渐变之条纹背景
- 光测条纹图处理中免除噪声的正则化条纹法(p1-p3)
- 光测条纹图处理中免除噪声的正则化条纹法(3-2)
- 光测条纹图处理中免除噪声的正则化条纹法(3-3)
- Css3透明
- CSS3新技术:圆角、透明、阴影和大小
- CSS3 透明属性 RGBA 和 opacity
- bootstrap - 表格(条纹、边框、压缩)
- 清洁和时尚的CSS3的表格
- 清洁和时尚的CSS3的表格
- css3-表格
- JavaScript + CSS 美化出的条纹表格样式
- CSS3----透明滤镜效果
- CSS3圆角,阴影,透明
- css3透明幻灯片切换
- Spring复习(三)AOP详解
- hibernate中的一级缓存和二级缓存
- 更换IDE JDK版本
- javascript闭包
- ognl 获取服务器 四大范围中的值
- css3 条纹化和透明化表格
- OpenCV学习体会(1)
- oracle 随机数
- java打包工具------fat jar(可以打包第三方jar包)
- html语言总结
- JSP页面中的相对路径问题
- 快速恢复区
- 第六周作业(改)
- 一步步学习stm32...