使用CSS和HTML的表格单元格的背景色
[英]background color of table cells using css and html
问题描述
I've coded a table I want it to be like this : even and odd rows have different colors and first row and column have the same color ; 
我已经编写了一张表，希望它像这样：偶数和奇数行具有不同的颜色，而第一行和列具有相同的颜色； I used colgroup for coloring first column but it doesn't work. 我使用colgroup为第一列着色，但是它不起作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
</style>
</head>
<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>
<tr style="background:purple;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
3 个解决方案
解决方案1
0 已采纳 2015-07-14 00:53:06
Maybe this is what you wanted. 也许这就是您想要的。
CSS CSS
table tr td:first-of-type {background-color: purple !important;}
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> tr.odd{background-color:#f9f;} tr.even{background-color:#fcf;} table tr td:first-of-type {background-color: purple !important;} </style> </head> <body> <table width="200" border="1"> <colgroup span="1" style="background:purple;"></colgroup> <tr style="background:purple;"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="odd"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="even"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="odd"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
解决方案2
0 2015-07-14 00:54:46
You can use the even and odd rules of the nth-child pseudoclass 您可以使用第n个子伪类的偶数和奇数规则
tr:nth-child(even) {background: #FCF}
tr:nth-child(odd) {background: #F9F}
Followed by: 其次是：
td:first-of-type,
tr:first-of-type {background: purple}
解决方案3
0 2015-07-14 01:20:42
You can use CSS nth-child (IE9+), which also removes the need for even and odd classes in the HTML. 您可以使用CSS nth-child （IE9 +），它也消除了HTML中对偶数和奇数类的需求。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> td {background-color:#f9f;} tr:nth-child(even) > td {background-color:#fcf;} tr > td:first-child {background-color:purple;} </style> </head> <body> <table width="200" border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用CSS在表格单元格之间/之间提供纯色背景 - Using CSS for solid color background across/between table cells
使用 CSS 网格重新定位 HTML 表中的单元格 - Reposition cells in HTML Table using CSS Grid
使用html n css的背景颜色 - background color using html n css
HTML / CSS背景颜色 - HTML/CSS background color
Html 和 css 背景色 - Html and css background color
使用JQuery在mousehover上获取动态填充的表格单元格的背景色 - Get background color of dynamically populated table cells on mousehover using JQuery
CSS / CSS3-如何使表格行中的背景颜色在表格单元之间没有空格？ - CSS/CSS3 - How to make background-color in table row without spaces between table-cells?
表格单元格中的CSS文本颜色 - CSS text color in table cells
使用CSS / HTML / Python / SASS（但不使用JS）根据值更改表格单元格背景的颜色？ 无需动态 - Change the color of the background of a table cell based on the value using CSS/HTML/Python/SASS (but no JS)? No need to be dynamically
如何使用CSS在HTML中的单元格之间的边框间距中填充颜色 - How to fill color in border spacing between cells in HTML using CSS
相关标签