以css产生异行异色的table

最新推荐文章于 2023-06-12 13:27:22 发布
最新推荐文章于 2023-06-12 13:27:22 发布
阅读量2.2k 收藏
点赞数
分类专栏： Usable WEB 文章标签： table css xhtml html border 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smile2me27/article/details/31394
版权

代码：
background-color:expression((this.previousSibling&&this.previousSibling.style.backgroundColor=="lightskyblue")?"LightSteelBlue":"lightskyblue");

适用：ie5.5以上浏览器

范例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
table.table1 TR
{
    BACKGROUND-COLOR: expression((this.previousSibling&&this.previousSibling.style.backgroundColor=="lightskyblue")?"LightSteelBlue":"lightskyblue");
}
</style>
</head>
<table class="table1" cellspacing="1" cellpadding="1" width="80%" align="center" border="1">
  <tr>
    <td>ab</td>
    <td>ab</td>
    <td>ab</td>
    <td>ab</td></tr>
  <tr>
    <td>cd</td>
    <td>cd</td>
    <td>cd</td>
    <td>cd</td></tr>
  <tr>
    <td>ef</td>
    <td>ef</td>
    <td>ef</td>
    <td>ef</td></tr>
  <tr>
    <td>gh</td>
    <td>gh</td>
    <td>gh</td>
    <td>gh</td></tr>
  <tr>
    <td>ij</td>
    <td>ij</td>
    <td>ij</td>
    <td>ij</td></tr>
  <tr id="a">
    <td>kl</td>
    <td>kl</td>
    <td>kl</td>
    <td>kl</td></tr>
  <tr>
    <td>mn</td>
    <td>mn</td>
    <td>mn</td>
    <td>mn</td></tr>
  <tr>
    <td>op</td>
    <td>op</td>
    <td>op</td>
    <td>op</td></tr></table>
<body>
</body>
</html>

 

abababab
cdcdcdcd
efefefef
ghghghgh
ijijijij
klklklkl
mnmnmnmn
opopopop
smile2me27
关注
专栏目录
QPushButton异形按钮带点击效果
草上爬的博客
11-14 4035
QPushButton异形按钮带点击效果。只有点击图标才会有点击效果，点击按钮上的非图标区域是没有点击效果的。
jQuery实现异形轮播图
sinat_50265804的博客
03-19 2032
思路： 异形轮播图与普通轮播图不同的一点，是异形轮播图一次性展示多个图片，且图片大小的位置会动态变化。 以往我的处理办法都是直接给要展示的图片动态的添加一个class类，简单粗暴。这次我在很多地方都使用了数组思想和对象思想，比如arr中我放了正在展示的图片的索引值，并通过数组的pop()、push()、shift()、unshift()方法实现arr数组中储存的图片索引值的动态删减，实现点击按钮就可以控制正在展示的图片的索引值。又比如在给每个li设置背景颜色backg...
css3制作梯形,CSS3 用TABLE表格做成的梯形动效
weixin_33623088的博客
08-04 276
CSS语言：CSSSCSS确定*,*::before,*::after {box-sizing: border-box;}body {font-family: 'Open Sans', sans-serif;margin: 0;padding: 0;background-color: #333;font-size: 66.5%;}@-moz-keyframes anim {0% {width: 1...
CSS复杂表格的设计
公子&小白的博客
03-25 4157
一方法： &lt;!--1、先制作表格用tr th和tr td 2、若要建立叠加的表格，必须建立一个盒子通过覆盖将表格分成两份 3、新见得盒子必须绝对定位于表格。 4、然后将盒子和表格覆盖。完成 --&gt;二、代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;!--1、先制作表格用tr th和tr td 2、若要建立叠加的表格，必须建立一个盒子通过...
css table表格 rowspan跨行后设置hover效果
飞猪
07-19 1503
css table表格 rowspan跨行后设置hover效果 将 rowspan 的多个相关行，用一个tbody包起来，然后设置tbody:hover效果，自己写了个demo，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
使用CSS实现table隔行变色
Java技术
11-01 7134
方法一：tr:nth-child(odd){background:#F4F4F4;}方法二：tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
python解析css文件_Python-CSS入门
weixin_39721953的博客
12-07 912
一.架构分析页面 => div的层级结构 => 具有采用哪些功能标签显示内容结构层 > 位置层(布局层) > 内容层二.css引入- 行间式 - 内联式 选择器 {width: 100px;height: 100px;}- 外联式 /* 适合团队高效率开发, 耦合性低, 复用性强 */三.三种引入"优先级"分析1.没有优先级2.不同的属性样式协同操作,相同的样式采用覆盖机...
swiper实现异形轮播效果
10-15
为了让轮播图片达到预期的“异形”效果，我们需要通过CSS来调整`.swiper-slide`和`.swiper-slide-active`的样式。例如，可以增加一个突出效果，让当前活动的图片在视觉上更加突出： ```css .swiper-slide { ...
异行星RPA使用操作系统+系统应用打造的RPA流程自动化
最新发布
09-25
异行星RPA使用操作系统+系统应用打造的RPA流程自动化。介绍了异行星RPA以及pattern os开发操作系统的功能。 RPA并不是肉眼可见的机器人，而是一款自动化服务的软件。通过人工智能和自动化技术，可替代人在电脑前执行...
3DMax大型空间异形吊灯建模教程
rrmod的博客
06-12 209
案例如下图。这类异形吊灯在室内设计中，还是蛮常见的，可能不一样，但同类。这节分享，就给大家讲解一下这类异形吊灯的思路建模。希望这个案例能带给大家不一样的思路，之后再遇到这种异形，再难不倒你。
previousSibling 使用问题
luodao_的博客
11-23 1878
在使用 previousSibling 获取某个元素的上一个兄弟节点时，节点之间不应存在有空格，否则会报错。 无标题文档 window.onload=function(){ var oLi=document.getElementById('li1'); oLi.previousSibling.style.background='red'; }
实现表格行的闪烁效果
acq的博客
09-06 1324
实现表格行的闪烁效果 想要实现点击一个a标签，通过ID跳转到相应的表格行，设计一个表格长这样的： &lt;div&gt; &lt;h2 id="aaa" class="page-header"&gt;表格测试&lt;/h2&gt; &lt;div class="table-responsive"&gt;
让HTML表格的边框可以拽动
The Time With Working
07-02 3842
HTML中的Table的单元格是不能够通过鼠标拽动而改变大小的，如果想实现如同word中的表格一样可以通过鼠标拽动，就需要自己写函数了。可以通过两种方法来实现，一是直接写网页脚本，二是写htc扩展table的行为。我这里采用了htc扩展table行为的方法来实现它，好处是脚本代码的封装和引用都很方便。 下面是一个实现了基本功能的htc： splitCellTable.htc：           
网页中文本复制的两种方法
The Time With Working
08-30 3424
适用于：IE5.X及之上版本 在某些情况下，我们希望在我们网页中的一些文字很方便的提供给用户复制的功能。比如你的编写了一个HTML或者C#的教程，放到你的个人网页上，其中有些源代码可以让用户直接复制，如果你把代码直接写成到一个或者当中，当用户复制了你的网页中的代码，在某些编辑器里，你提供的代码会带有HTML的标签，这是因为网页文本的复制是HTML代码的复制。 为了解决这个问题，通常我们采用
还是得注意DOCTYPE的声明
The Time With Working
11-02 2633
前两天才提到DOCTYPE的问题，今天在博客堂发现也有人为它所困扰。在lostinet《可怕的loose.dtd》这篇文章里谈到因为使用了DOCTYPE使一个样式失效的问题。但是仔细看了看，发现其实并不是因为DOCTYPE在做怪，而是不正确的html代码和没有理解DOCTYPE造成。下面这个html代码是lostinet提到的失效的代码：注意看div的style属性，在red后面多了一个"符号，粗
别忘了文档类型声明
The Time With Working
10-29 1739
以前在做网页的表格数据展示的时候，我曾经也想做一个固定Header，滚动内容的Table，但是用css的方法没有成功，而脚本的方法太麻烦，就没有用。前几天看到一个网页，也就是用固定Header滚动Body的Table，它是纯粹采用css实现的。难得的不是只用css实现了这种效果，而是它让多种浏览器能够兼容，它支持IE6/5.x、Opera7.x、Mozilla1.x、Konqueror 3.x等。
WinMerge每个文件差异行及差异数据高亮显示是怎么实现的？Katalon利用java-diff-util可以实现类似功能吗
06-02
WinMerge实现每个文件差异行及差异数据高亮显示的方法是在比较文件时，将两个文件的内容分别读入内存，按行进行比较，找到不同的行，然后对比不同的行中每个字符的差异，标记出不同的字符，并高亮显示。在显示时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值