使用css3实现表格隔行换色/隔列变色/指定行字体颜色和背景颜色的方法
table tr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/ table td:nth-child(even){color:#C00;}/*偶数行字体颜色*/ table tr:nth-child(5){background:#73B1E0;color:#FFF;}/*指定第五行背景色和文字颜色*/
实际效果实例:
此段实例对应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>