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 calc()会计算属性详解
Feb 27 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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面向对象分析设计的61条军规小结
2010/07/17 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
深入理解python对json的操作总结
2017/01/05 Python
python中模块的__all__属性详解
2017/10/26 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
怎么写好自荐信
2013/10/30 职场文书
入团者的自我评价分享
2013/12/02 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
酒店led欢迎词
2014/01/09 职场文书
销售助理岗位职责
2014/02/21 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
社团活动总结范文
2014/04/26 职场文书
人民调解员培训方案
2014/06/05 职场文书
2014年科协工作总结
2014/12/09 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
python四种出行路线规划的实现
2021/06/23 Python
Django框架模板用法详解
2022/06/10 Python