利用CSS控制表格的交替颜色

css|控制

<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
-->
</style>
</HEAD>
<table>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
</table>
//myhyli @ blueidea
 -----------------------------------------------<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
</HEAD>
<table>
<tr><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td></tr>
</table>

时间： 2024-10-18 10:50:37

利用CSS控制表格的交替颜色的相关文章

CSS也能控制表格的交替颜色_CSS/HTML

复制代码 代码如下: <style type="text/css">  <!--  tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}  -->  </style>  </HEAD>  <table>  <tr><td>第1行</td><td>

CSS控制表格——制作日历

表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格. 一.表格中的标记 表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据的. 下图是一个没有使用任何CSS修饰的表格: 二.表格的颜色 表格的颜色设置与文字颜色设置完全一样,通过color属性设置表格中文字的颜色,通过background属性设置表格的背景颜色. 三.表格的边框 border属性是用来设置表格边框的粗细的,当设置其值为0时,表明表格没有边框. borderco

利用CSS控制打印

css|打印|控制 利用CSS控制打印 放在这里,算是一个备份 <style>@media print{INPUT {display:none}}</style><TABLE border="0" style="font-size:9pt;" width="300px" align="center"><THEAD style="display:table-header-gro

关于CSS控制表格文字样式的研究

即使在DIV满天飞的今天,Table在网页的布局中还是少不了的,因为当需要输出数据时,Table布局远远比DIV布局有优势,而且同样的我们可以通过CSS来控制表格样式.要知道WEB标准并非是通篇的DIV+CSS,而是倡导采用更合理的语义标签来进行布局. 文字的对齐方式一直是排版的重中之重,特别是对于数据显示来说,如何才能让众多的数据的可读性更强可识别性更高呢? 先来看表格一的文字对齐,这无疑是最失败的对齐方式.表格标题<th />标签内容默认是居中对齐的,可是当把<td />标签的

css控制表格边框:css 控制边框

以下内容为程序代码  <style> h3 {color: #cc6600} table.pad {padding: 5mm; background-color: #ccefcc} p.width5 {border-width: 1px} p.colorred {border-width: 2px; border-color: red} p.inset {border-width: 5px; border-color: red; border-style: inset} p.outset {b

利用css控制网页的左右排列

 在网站的内容页中,我在左上角放置了300*250的广告,利用的是css的浮动<div style="float:left;margin-right:15px;">,由于css的特性,这样设置后,当文章的高度超过了250像素时,文章自动移动到广告的下面去了,而不是左右两列分开,如何左右分开呢?那么我们就给这个div加个纵向的高度<div style="float:left;margin-right:15px;height:300px">这个高

css控制表格细边框样式

表格边框的粗细在css中可以轻松实现,不会的朋友可以参考下文     复制代码 代码如下: table{border-collapse:collapse;} td{background:#F2F2F2;border:solid 1px #CCCCCC;width:100px;height:22px;}

用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大_经验交流

对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break

to hiller:利用脚本控制表格单元的内容（原创）

现在终于找到相关资料,做完了例子这个发现MSDN中也有一个类似的例子,呵呵!!<script language="javascript">function changeCell(r,c){var content=prompt("清输入内容:");kk.rows(r).cells(c).innerHTML=content;}</script><body><table id=kk width=100% cellspacing=1