How can I format outer table but not inner table

I have a table nested inside another table. I want to give the outer table cells a border but not the inner table cells. All proper css and html comments aside, how can I style the outer cells but not the inner cells?

css

#table1 td
{
    border: solid 1px black;
    padding: 5px;
}

html

<table id="table1">
开发者_开发技巧    <tr>
        <td>Outer table</td>
        <td><table>
            <tr>
                <td>Inner table</td>
                <td></td>
            </tr>
            </table></td>
    </tr>
</table>

http://jsfiddle.net/kbVH2/

EDIT

This is the desired effect, #table2 http://jsfiddle.net/kbVH2/4/

I could do the following, but I was trying to keep it all in the css.

<table id="table2" border="1">
    <tr>
        <td>Outer table</td>
        <td><table>
            <tr>
                <td>Inner table</td>
                <td></td>
            </tr>
            </table></td>
    </tr>
</table>

This is how I would do it:

#table1 td {
    border: solid 1px black;
}

#table1 table td {
    border: none;
}

Live demo: http://jsfiddle.net/kbVH2/3/

You might try using the child selector (>) like this:

#table1 > tbody > tr > td

jsFiddle Demo

Please note that in the demo I also added the tbody element. Some browsers will add it automatically if you omit it (like my Chrome), others might not, so for consistency, I normally add it to make sure it is not breaking my selectors.

I would not say this is your best choice in every situation, but a possible alternative.

Note: Internet Explorer 6 does not support the child selector. See Quirksmode CSS 2.1 Selectors Compatibility Table.

#table1 td
{
    border: solid 1px black;
    padding: 5px;
}
#table1 td table td
{
 /*NORMAL INSIDE TABLE CSS HERE*/
}

put what ever you want the inside table to do inside the second selector. The inside table automatically inherits the outer ones css, but you can override it

Did you try giving them different class IDs and drive the CSS from those classes?

#table1 tr td{
//The table 1 css
}
#table1 tr td table tr td
{
//The second table
}

This should be exact to the second table!