my css is located at http://sillybean.net/css/seaglass.css . i want to use this css for only one of html table. in the same page, i have multiple html tables. i do not want to affect other html tables. what is the fastest way to do it with less modification on http://sillybean.net/css/seaglass.css ?
+2
A:
Can you just apply a class to the table you want to effect, then use that class in your CSS?
In your HTML, you can put:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
And 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, 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, td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover, td a:focus { color: #1E4C94; }
.mytable th a, td a:active { color: #fff; }
.mytable tfoot th, tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
MiffTheFox
2009-06-19 05:07:33
indeed, this is almost like "namespacing" your css definitions.
Doug R
2009-06-19 05:08:32
A:
Apply the Class name to the table on which you want to apply css rest is fine...
Meetu Choudhary
2009-06-19 05:08:58
+1
A:
This is exactly what id and class attributes are for. If you can't change the markup (like styling myspace) then you need to use selectors to target the one table more precisely. The choice of selectors is something you'll need to decide yourself.
SpliFF
2009-06-19 05:10:06
+1
A:
Define an ID or CLASS in your CSS that will affect the table in question.
Then, in your HTML code, say
<table id="theid"... />
or
<table class="theclass" ... />
The CSS ID looks like
#theid
{
//attributes
}
Classes look like:
.theclass
{
//attributes
}
Sev
2009-06-19 05:10:38
A:
Here are class selectors and markup that 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 you can use an ID selector in a similar 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 out about which of these two approaches to use. Either is fine for your needs. According to the spec, you can only put a given ID on at most one element in your HTML (but most browsers allow you to break that rule).
Travis Wilson
2009-06-19 05:13:41
A:
While you should add a class to the table you want to affect, let's assume you can only modify the css. In that case you can get pretty fancy with selectors. But not all the browsers support them. You can see that the CSS 2 selectors don't support the n-th child concept. Otherwise, if you 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 with CSS2 selectors, but the second and 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 */
dlamblin
2009-06-19 05:42:21