2

I have tables styled as such:

table { width: 100%; border: 0; margin-bottom: 2em;  }

 table thead th
 {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    padding: 10px;

    background-color: #263849 !important;

    color: #FFF;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}       

table td { vertical-align: top; }

table tbody tr td { background: #f4f4f4;  border-bottom: 1px solid #D5D5D5;
border-top: 1px solid white; }

table th { padding: 10px 0; }
table tbody td { padding: 10px; }

table tr.even td { background: #F9F9F9; }

tr:nth-child(odd) { background-color:#F9F9F9; }
tr:nth-child(even) { background-color:#FFF; }

Now on the same page I want another table, with different style.

So that table I say call is table class="ver2"

What and how do I style this different table ? Its starting to do my head in.

1 Answer 1

3

You can set specific styles to the second table by targeting it with your CSS:

table.ver2    {/*whatever your declarations are...*/}
table.ver2 th {/*declarations*/}

etc...

Since you've decided to use a class, you need to use the period symbol for your CSS rules. If you chose to use the 'id' attribute, you'd replace the period with the pound sign (#).

3
  • 1
    Nope. The class is on the table, not the table rows. So to target the tr's, use "table.ver2 tr" This basically means "For all tr nodes that are children of all table nodes with a class attribute = 'ver2'. Feb 25, 2011 at 1:01
  • Cheers Guys the issue I had was one tables border property was affecting another table class's border property, I wasnt re declaring the border-bottom on the secondary class, and for some reason if you dont redeclare it, it steals the identy from the other class. Thanks
    – 422
    Feb 25, 2011 at 1:29
  • @BrianFlanagan it would have been good if you had shown how to this in the HTML <table> definitions
    – Mawg
    Jun 19, 2015 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.