博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
表格行的偶数与奇数
阅读量:5945 次
发布时间:2019-06-19

本文共 1019 字,大约阅读时间需要 3 分钟。

警告: 著作此文时 (2003年 2月), 主要的浏览器还未支持  (于2001年11月引入), 而且只有少许支持 

一种提高易于阅读大型表格的方法是每排以色调交替. 譬如,下面的日期表显示浅灰色背景的偶数排, 以及白底的奇数排. 这规则在此非常简单.

tr:nth-child(even) {background: #CCC}tr:nth-child(odd) {background: #FFF}

事实上, CSS不只准许偶数/奇数的交替, 也准许多变化的间距. ‘偶数’ 与 ‘奇数’ 的关键词就只是方便的简称. 譬如一个长的表格,你可以如此作:

li:nth-child(5n+3) {font-weight: bold}

这就是说, 始于第三位,每第五位列表项目是粗体字,. 换句话说, 项目的第三, 八, 十三, 十八, 二十三, 等等.., 将是粗体字.

偶数与奇数列

同样也可用于表格中的列, 但要有一个文档对应于列中的元素. HTML为此提供COL. 这表格必须从头每一列有一COL:

Month 1994 1995 1996...

(COL除了用于格式,也可用于其它方面, 但在这种情况下我们所须的只是 COL元素的存在) 下列规则给予第一列黄色的背景, 其次是从第三列开始的每隔一列用灰色底.

col:first-child {background: #FF0}col:nth-child(2n+3) {background: #CCC}

排的背景(TR)是先于列的背景(COL)绘制的, 因此若你要确认列的背景的显而易见, 你就不应在排的背景着色.

例:

<style type="text/css">

table tr:nth-child(odd) td {

background: none repeat scroll 00#FFFFFF;} 

转载于:https://www.cnblogs.com/zengsong-restService/p/3277373.html

你可能感兴趣的文章
jsonp: js跨域
查看>>
(转)C#中的Predicate<T>与Func<T, bool>
查看>>
5.移植uboot-设置默认环境变量,裁剪,并分区
查看>>
怎样去主动拿一个锁并占有?synchronized关键字即可
查看>>
【重拾Effective Java】一
查看>>
Java中的事务
查看>>
Netty 编解码技术 数据通信和心跳监控案例
查看>>
Linux时间子系统(四) timekeeping
查看>>
快速书写常见的 Kotlin 代码 MD
查看>>
数学老师这样可以快速画出绝对值函数
查看>>
JAVA_SE基础——56.包的创建
查看>>
基于浏览器父子窗口值传递
查看>>
[na]ip数据包格式
查看>>
python geoip2使用
查看>>
Hadoop学习之路(二)Hadoop发展背景
查看>>
hdu 1203 I NEED A OFFER!(01背包)
查看>>
003-RHEL7-Linux系统维护管理命令使用
查看>>
win10 localhost 解析为::1 的解决办法
查看>>
自己动手写一个通用的分页存储过程(适用于多表查询)
查看>>
一次练手实战破解某字典–爆破篇
查看>>