Highlight row using CSS
Question
The following is a class which I use to highlight a row, but it only makes changes for the cursor and font, not bgcolor of a row.
I have also used background-color: #FFDC87; but it fails to get the desired output.
.highlighted {
bgcolor: #FFDC87;
cursor : pointer;
/*font-size : 50px;*/
}
How can I make it work?
4 answers
solution1
11 2010-02-13 12:26:43
That's because the bgcolor CSS property doesn't exist. The property you're looking for is background-color .
If this doesn't work, there's something else that is messing with the element's background-color , and is blocking this from working. But we'll need a little more code to help you with that.
solution2
5 2010-02-13 12:49:33
As is clear by the other answers, it's background-color instead of bgcolor . Note that you can see if there are errors in your HTML, JS or CSS code if you're using a plug-in like Firebug or Webdeveloper (both Firefox plug-ins). This is what Webdeveloper mentioned:
alt text http://img191.imageshack.us/img191/7469/csserror.png
And you'll probably also want to make the table's borders collapse, otherwise the rows in your table will have gaps in it. Here's what you could do:
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
padding-right: 10px;
}
.highlighted {
background-color: #ffdc87;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr class="highlighted">
<td>1</td><td>11</td><td>111</td>
</tr>
<tr>
<td>2</td><td>22</td><td>222</td>
</tr>
<tr class="highlighted">
<td>3</td><td>33</td><td>333</td>
</tr>
<tr>
<td>4</td><td>44</td><td>444</td>
</tr>
<tr class="highlighted">
<td>5</td><td>55</td><td>555</td>
</tr>
</table>
</body>
</html>
solution3
3 2010-02-13 12:27:35
Instead of bgcolor, the CSS rule is background-color . Give that a try.
solution4
2 2010-02-13 12:27:55
The CSS for background color is "background-color", eg background-color: #FFDC87;
Try that :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.