Css And Nested Table Problem

I have a table that has a nested table inside. The nested table is inheriting the css style of the parent table. How can I get rid of this styling inheritance so my nested table does not use the gridtable class? Here is the code:

<style type="text/css">
table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    width:250px;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
</style>
 
 
<table class="gridtable">
<tr>
    <th>Info Header 1</th>
</tr>
<tr>
    <td>
    <table>
    <tr>
    <td></td>
    </tr>
    </table>
    </td>
</tr>
</table>

HTML:

Thanks

 

give the nested table inside it's own style/class so it don't inherit maybe?

even if it's only like this
margin:0;
padding:0;
border:0;

 

You need to create additional styles after your original ones like this:

table.gridtable table {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border: none;
width: auto;
}
table.gridtable th table th {
border: none;
padding: 8px;
background-color: transparent;
}
table.gridtable td table td {
border: none;
padding: 8px;
background-color: transparent;
}

Code (markup):

Get the idea? You have to undo what you did for the outside table.

 

Given the outer table only has one column per TR, why are you even using a table? As a rule of thumb if you are putting a table inside a table, the outer one probably shouldn't even BE a table. You have a H2 and a DIV.

But without seeing what you are doing for content with these, it's hard to say what the markup should be. Are you REALLY sure all this is tabular data? If not, this isn't 1997 so it doesn't belong in a table.

Of course that absurdly undersized fixed metric 11px font-size is sending up warning signs too, since that's an accessibility disaster.

 

Oh, the presence of the word 'grid' also raises my hackles... but that's because I consider Grids to be as bad or even worse than tables for layout -- a crutch at best, defeating the entire reason for using HTML and CSS at worst.

Just saying.

 

Thanks for all the comments guys. I was not using this table for layout. It is dynamically created with php and the client didnt want it changed. I was never able to get the nested table to style properly so I decided to just redo the nested table with div tags, it worked out. The table I included above was just for reference, it is a far more complex set of tables displaying values, based on a six step wizard. I was able to get everything working without having to get rid of the tables for my client. Thanks for all your help guys.