[ACCEPTED]-fastest way to use css for html table without affecting another html table-css

Accepted answer

Score: 30

Can you just apply a class to the table 3 you want to affect, then use that class 2 in your CSS?

In your HTML, you can put:

<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>

And 1 then, add the class selector to your CSS:

table.mytable { border-collapse: collapse; border: 1px solid #839E99;
                background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }

Score: 3

Define an ID or CLASS in your CSS that will 3 affect the table in question.

Then, in your 2 HTML code, say

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

<table class="theclass" ... />

The CSS ID looks like

#theid
{
  //attributes
}

Classes 1 look like:

.theclass
{
  //attributes
}

Score: 2

This is exactly what id and class attributes 5 are for. If you can't change the markup 4 (like styling myspace) then you need to 3 use selectors to target the one table more 2 precisely. The choice of selectors is something 1 you'll need to decide yourself.

Score: 2

For Multiple Table and Classes

HTML Table

<table id="tableId1">
--Table Content--
</table>

<table id="tableId2">
--Table Content--
</table>

<table class="tableClass1">
--Table Content--
</table>

<table class="tableClass2">
--Table Content--
</table>

CSS Script

#tableId1, #tableId2
{
  //attributes
}

.tableClass1, .tableClass2
{
  //attributes
}

Score: 1

Here are class selectors and markup that 8 will style the first table but not the second:

<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>

Or 7 you can use an ID selector in a similar 6 fashion:

<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>

Sometimes a religious war breaks 5 out about which of these two approaches 4 to use. Either is fine for your needs. According 3 to the spec, you can only put a given ID 2 on at most one element in your HTML (but 1 most browsers allow you to break that rule).

Score: 0

Apply the Class name to the table on which 1 you want to apply css rest is fine...

Score: 0

While you should add a class to the table 8 you want to affect, let's assume you can 7 only modify the css. In that case you can 6 get pretty fancy with selectors. But not all the 5 browsers support them. You can see that the CSS 2 selectors don't support 4 the n-th child concept. Otherwise, if you 3 had html like:

<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>

You could target the first 2 with CSS2 selectors, but the second and 1 third can only be targeted with CSS3 ones.

table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */

Source: stackoverflow.com

[ACCEPTED]-fastest way to use css for html table without affecting another html table-css

How to detect which one of the defined font was used in a web page?

Why is my element with position:absolute always showing up underneath position:relative items?

css background image positioning (negative position?)

How to modify STYLE attribute of element with known ID using JQuery

Google Maps API v3: InfoWindow not sizing correctly

Is there a way to get a web page header/footer printed on every page?

Where to specify image dimensions for fastest rendering: in HTML or in CSS?

Styling an anchor tag to look like a submit button

How do you make something to appear slowly on a page using Javascript?

how can i put an image into select?