CODEWITHSUNDEEP
htmlcss
FarFigNewton
FarFigNewton

Reputation: 7273

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>

Upvotes: 2

Views: 3278

Answers (5)

Šime Vidas
Šime Vidas

Reputation: 185933

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/

Upvotes: 8

kapa
kapa

Reputation: 78681

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.

Upvotes: 1

Max Allan
Max Allan

Reputation: 640

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

This should be exact to the second table!

Upvotes: 0

Saket
Saket

Reputation: 46137

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

Upvotes: 0

Double_0_negative
Double_0_negative

Reputation: 35

#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

Upvotes: 0

Related Questions