乖兔博客

乖兔 > CMS系统 > CSS > css3 表格隔行变色隔列变色代码写法

css3 表格隔行变色隔列变色代码写法

乖兔 更新于: 2020-03-07 分类:CSS

css3表格隔行换色.jpg

使用css3实现表格隔行换色/隔列变色/指定行字体颜色和背景颜色的方法

table tr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/
table td:nth-child(even){color:#C00;}/*偶数行字体颜色*/
table tr:nth-child(5){background:#73B1E0;color:#FFF;}/*指定第五行背景色和文字颜色*/

实际效果实例:

css3实现隔行变色隔列变色.png

此段实例对应html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
	table tr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/
	table td:nth-child(even){color:#C00;}/*偶数行字体颜色*/
	table tr:nth-child(5){background:#73B1E0;color:#FFF;}/*指定第五行背景色和文字颜色*/
  </style>
 </head>
 <body>
	<table class="gridtable">
	<tr>
		<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th><th>Info Header 4</th><th>Info Header 5</th>
	</tr>
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td><td>Text 1D</td><td>Text 1E</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><td>Text 2D</td><td>Text 2E</td>
	</tr>
	<tr>
		<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td><td>Text 3D</td><td>Text 3E</td>
	</tr>
	<tr>
		<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td><td>Text 4D</td><td>Text 4E</td>
	</tr>
	</table>
 </body>
</html>


打赏