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实现轮播图效果实例
May 04 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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/07/12 PHP
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python算术运算符实例详解
2017/05/31 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
销售员岗位职责范本
2014/02/03 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
时尚女魔头观后感
2015/06/04 职场文书
导游词之桂林
2019/08/20 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL