Question

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>

Answer 1

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/