CSS for Table Properties in HTML - html

Question

In a single page am having multiple tables but only for a set of tables want to apply css not for all. which for table bgcolor, th color, border color and text color.So I tried to create a separate class .mytable and applied which is not working but if I make that .mytable to table it comes for all the tables.Please help me to solve this.Thanks in Advance.
jsFiddle Link is Here
<style>
.mytable td th //instead of .mytable table it works
{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
</style>
<table class="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
<table> /// no need of this css
</table>

Answer 1

Rewrite this .mytable td th as .mytable td, .mytable th
Here: http://jsfiddle.net/y8B2j/1/

Answer 2

Try this
.mytable td, .mytable th
{
border:1px solid green;
}
DEMO

Answer 3

I cant see any problem in above code, but you can try identifier instead of class by denoting it as '#mytable'.
Just give it a try.

Answer 4

th selects every <th>-element.
.mytable td th selects all <th>-elements inside <td>-elements inside an element, that has class mytable.
I think what you need is this:
/* td & th elements inside 'mytable' */
.mytable td, .mytable th
{
border:1px solid green;
}
/* th elements inside 'mytable' */
.mytable th
{
background-color:green;
color:white;
}

Answer 5

<style>
.mytable td th
{
border:1px solid green;
}
.mytable th
{
background-color:green;
color:white;
}
</style>
<table class="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>

Answer 6

It's because, you write wrong CSS Rule :
Your css rule : .mytable td th refers to inner th tag into table columns .mytable td.
So, If you want apply your css style for both th and td. You need to write this one:
.mytable td, .mytable th
{
border:1px solid green;
}
Try in fiddle

Answer 7

As i seen your code you using th as a child tag of td but th not child tag of td so use below code
Click here for fiddle
.mytable th
{
border:1px solid green;
}

Answer 8

Please add these lines on top of your Css file
tr{ background:#00CC66;}
th{ background:#ccCC66; border:1px dashed #0066FF;}
td{ background:#ffCC66;}
color:#fff;

Answer 9

Access like this:
.mytable td, .mytable th (It changes the property for all td and th nested inside the .mytable)
OR
If you have seperate class inside the mytable means
HTML
<div class="mytable">
<div class="data">
<ol>
...
</ol>
</div>
</div>
CSS
.mytable.data ol //Accessing the child ol