css3 条纹化和透明化表格Firefox下测试成功


Posted in HTML / CSS onApril 15, 2014

使用class来条纹化表格,需要在html中将表格中每一行都按<tr><td></td></tr>写出,非常麻烦。

CSS3中的伪类渲染更能很好地定位页面元素。

然而有时即使你按照css3格式来写,在浏览器中却显示不出相应的效果,这时就需要考虑浏览器的兼容问题。

目前,全盘支持 CSS3 属性的浏览器有 Chrome 和 Safari,而且不管是 Mac 平台还是 Windows 平台全支持。

博主先用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(,,,)最后一个参数是调整透明度
复制代码
代码如下:

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);
}

最后的效果图:
css3 条纹化和透明化表格Firefox下测试成功
HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 #HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 #HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 #HTML / CSS
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
php 远程关机操作的代码
2008/12/05 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
Python中除法使用的注意事项
2014/08/21 Python
Python中文件操作简明介绍
2015/04/13 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2014年售票员工作总结
2014/11/19 职场文书
五年级上册复习计划
2015/01/19 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python