下面的例子展示了你如何交替展示表格的行的颜色。使用CSS3中的 nth-child(event)和nth-child(odd)， CSS3的伪选择器。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#table1 {
width: 100%;
}
thead {
background-color: black;
color: white;
text-indent: 14px;
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: rgba(0, 255, 0, 0.1); /* green, 10% alpha */
}
tbody tr:nth-child(even) {
background-color: rgba(255, 0, 0, 0.3); /* red, 30% alpha */
}
</style>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
</tr>
<tr>
<td>Row 6, Column 1</td>
<td>Row 6, Column 2</td>
</tr>
<tr>
<td>Row 7, Column 1</td>
<td>Row 7, Column 2</td>
</tr>
<tr>
<td>Row 8, Column 1</td>
<td>Row 8, Column 2</td>
</tr>
</tbody>
</table>
</body>
</html>
源码下载：
alternating-row-colors-in-a-table-in-html5.zip
分享到：
相关推荐
为了解决这一问题，我们可以使用JavaScript（JS）来实现表格行的交替颜色，提高用户的阅读体验。本教程将深入讲解如何用JS控制表格的交替颜色，使其呈现出更美观的视觉效果。 首先，我们需要理解HTML表格的基本结构...
本文将详细介绍如何在 ASP（Active Server Pages）环境中实现表格行背景颜色的交替变换，通过一个具体的示例来展示整个过程。 #### 核心知识点： 1. **ASP 基础**：了解 ASP 的基本概念及工作原理。 2. **创建 ...
总结来说，通过结合使用jQuery和JavaScript的原生功能，我们可以轻松实现数据排序和表格颜色交替显示。同时，对于动态加载或分页的数据，借助如jQuery DataTables这样的插件，这些功能的实现更加智能化和便捷。了解...
首先，使用jQuery进行交替变换颜色，通常是指在一系列元素（比如表格的行）上交替应用不同的样式，通常以改变背景颜色来表示。这种方法在数据展示、视觉效果等方面应用广泛。 第一种方法是利用jQuery的选择器和奇偶...
文档中还提到了一些相关的JavaScript代码示例，例如使用JavaScript实现表格行的背景颜色交替、li列表的数据隔行变色、响应鼠标事件改变表格或元素颜色、背景云的动态效果、鼠标移动时背景云的变化，以及使用Jquery...
9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑...
9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑...
斑马线效果，也称为条纹化显示效果，在网页设计中被广泛应用于表格、列表等元素上，通过为相邻行交替设置不同的背景色来增强视觉效果，使数据更加清晰易读。这一技巧不仅提升了用户体验，还能够帮助用户更快速地定位...
表格行颜色交替插件.mxp 层变换特效2.0.mxp 层动画效果插件.mxp 层或框架中调用URL文件插件.mxp 插入mtx、mtz格式等Viewpoint Media 3D文件插件.mxp 插入PHP代码插件.mxp 创建一个index页面插件.mxp 创建一个JustSo...