CODEWITHSUNDEEP
htmlcsscss-selectors
oompahloompah
oompahloompah

Reputation: 9333

How to apply a CSS style to a specific row in an HTML table?

I have an HTML page that looks something like this:

<html>
  <head>
    <style type="text/css">
       tbody, th, td {padding:0px;margin:0px;border:0px;}
       tr.foo { border: 1px solid blue; }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr><td>Nothing
        <tr class="foo"><td>Bordered
      </tbody>
    </table>
  </body>
</html>

Note: the style to tbody, th and td MUST NOT be changed, since (in my real use case), these styles are applied to other pages.

What CSS pattern selector can I use to highlight (create border around) the row with class foo ?

Upvotes: 3

Views: 21060

Answers (1)

BoltClock
BoltClock

Reputation: 723398

EDIT: I see you fixed your border rule. Since that comma was a question typo, the browser should interpret your CSS correctly (see jsFiddle). Try fixing your style tag per Oded's comment anyway.

Your selector is correct, but your declaration is was wrong, there shouldn't be a comma between solid and blue:

tr.foo { border: 1px solid blue; }

And you should probably close your td and tr tags, not that it's invalid to leave them open but it's a good practice nevertheless.

Upvotes: 4

Related Questions