Html table CSS?

Question

Common

table tr td
{
    vertical-align:middle;
}

Custom

table.custom tr td
{
    vertical-align:top;
}

When I use like this:

<table class="custom">
    <tr>
        <td>
            <table>
                <tr>
                    <td>this text align top, but I want to align middle
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

sub table behave like its parent. How can ignore parent element style?

Mirko Akov · Accepted Answer · 2013-02-03 11:53:10Z

1

One thing that you can do is adding the child selectors like so:

table.custom > tr > td { }

Then only the immediate children will match the style

answered Feb 3, 2013 at 11:53

Mirko Akov

2,45720 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankrates · Accepted Answer · 2013-02-03 11:53:21Z

1

You can use the > indicator to only target direct child elements

table.custom > tr > td
{
    vertical-align:top;
}

However it should be noted that using a table within a table is generally not a good idea. Note 2: this will not work in IE6.

answered Feb 3, 2013 at 11:53

Pankrates

3,0951 gold badge24 silver badges30 bronze badges

Comments

m.brindley · Accepted Answer · 2013-02-03 11:54:57Z

1

table.custom tr td will select children at any level. The following DOM chains will all match

table.custom->tr->td
table.custom->tr->foo->td
table.custom->foo->tr->bar->td

Take a look at the CSS child selector >

answered Feb 3, 2013 at 11:54

m.brindley

1,23810 silver badges19 bronze badges

Collectives™ on Stack Overflow

Html table CSS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related