CODEWITHSUNDEEP
csscss-tables
422
422

Reputation: 5770

Two different table styles

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.

Upvotes: 2

Views: 7482

Answers (1)

Brian Flanagan
Brian Flanagan

Reputation: 4632

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 (#).

Upvotes: 3

Related Questions