CODEWITHSUNDEEP
htmlcsscss-tables
hotkarl
hotkarl

Reputation: 33

How to format only one table with css

I'm trying to select one specific table on one html page to be formatted with css. I do not want any other tables anywhere else, including on the same page, to be formatted this way.

I tried this inside the header but it did not work-

<style>
    #table3 {
        td,th { padding: 10px }
        tr:hover { background-color: #f5f5f5 }
    }
</style>

<table id="table3">
...
</table>

Upvotes: 0

Views: 1528

Answers (3)

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93434

You can't nest selectors like that. At least not in normal CSS.

You want:

<style>
    #table3 td, #table3 th { padding: 10px }
    #table3 tr:hover { background-color: #f5f5f5 }
</style>

<table id="table3">
...
</table>

Upvotes: 5

user8116198
user8116198

Reputation:

This wont work because this isn't the format for CSS, although the concept is right in what you have done the format isn't correct.

Try this...

#table3 td, #table3 th {
    padding: 10px;
}

#table3 tr:hover {
    background-color: #f5f5f5;
}

However, if you would like to do it the way in which you did it. You could do it with a CSS compiler such as less, which you can view online as less js, it makes CSS lightweight and a lot easier to write.

Upvotes: 1

user3429660
user3429660

Reputation: 2722

The way you wrote it looks more like SCSS. If you need plain CSS, this is how it should look like:

<style>
    #table3 TD {
        padding: 10px;
    }
    #table3 TH {
        padding: 10px;
    }
    #table3 tr:hover {
        background-color: #f5f5f5;
    }
</style>

<table id="table3">
...
</table>

Upvotes: 0

Related Questions