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轻松实现圆角效果
Nov 09 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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生成静态文件的多种方法分享
2012/07/17 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Win8下python3.5.1安装教程
2020/07/29 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
运动会通讯稿500字
2014/02/20 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技