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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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 PDO实现的事务回滚示例
2017/03/23 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python__new__内置静态方法使用解析
2020/01/07 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
2019年大学生职业生涯规划书
2019/03/25 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
python某漫画app逆向
2021/03/31 Python
python文件名批量重命名脚本实例代码
2021/04/22 Python
Python 阶乘详解
2021/10/05 Python