CODEWITHSUNDEEP
css
user269390
user269390

Reputation: 11

Highlight row using CSS

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?

Upvotes: 1

Views: 758

Answers (4)

wsanville
wsanville

Reputation: 37516

Instead of bgcolor, the CSS rule is background-color. Give that a try.

Upvotes: 3

Jake Worrell
Jake Worrell

Reputation: 135

The CSS for background color is "background-color", e.g. background-color: #FFDC87;

Try that :)

Upvotes: 2

Bart Kiers
Bart Kiers

Reputation: 170138

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>

Upvotes: 5

Douwe Maan
Douwe Maan

Reputation: 6878

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.

Upvotes: 11

Related Questions