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教程:新增加的结构伪类
Apr 02 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 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+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JavaScript函数详解
2015/02/27 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python实现验证码识别功能
2018/06/07 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
nohup的用法
2014/08/10 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
工作交流会欢迎词
2014/01/12 职场文书
公司营业员的自我评价
2014/03/04 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技