tableCss style with Nested tables

Question

I am trying to set the first column of the outer table (tbStudentPreference) with special styles...

But the problem is that it applies not only to the outer table column but also to the table inside the outer table.

I want to apply my style only to the outer container table. Please help.

<style>

        #tbStudentPreference td:first-child {
            font-weight: bold;            
            vertical-align: top;
            width: 100px;
        }

        #tbStudentPreference {
            vertical-align: top;
            padding: 3px;
        }
    </style>


<table id='tbStudentPreference'>
                <tr>
                    <td>xxxxx
                    </td>
                    <td>.....
                    </td>
                </tr>
                <tr>
                    <td>xxxxx
                    </td>
                    <td>.....
                    </td>
                </tr>
                <tr>
                    <td colspan='2'>
                        <table>
                            <tr>
                                <td>Inside Table
                                </td>
                                <td>.....
                                </td>
                            </tr>
                            <tr>
                                <td>Inside Table
                                </td>
                                <td>.....
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

Abhitalks · Accepted Answer · 2014-12-02 09:39:27Z

2

I am trying to set the first column of the outer table..

You need to negate the inner table.

Also, the browser automatically adds a tbody for you, so it is not enough to use a child combinator on tr directly. You need to override that with a child-combinator on tbody. You then negate the inner table by using the presence of colspan attribute.

So, you select td which is a first-child among those which are not having a colspan attribute, direct descendant of tr which itself is a direct descendant of tbody which itself is direct descendant of your table. Like this:

#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {...

The negation pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Snippet:

#tbStudentPreference { border: 1px solid gray; border-collapse: collapse; }
#tbStudentPreference td { border: 1px solid gray; }

#tbStudentPreference > tr > td:not([colspan]):first-child {
    font-weight: bold; color: red;
}
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {
    font-weight: bold; color: red;
}

<table id='tbStudentPreference'>
    <tr><td>xxxxx</td><td>.....</td></tr>
    <tr><td>xxxxx</td><td>.....</td></tr>
    <tr><td colspan='2'>
        <table>
            <tr><td>Inside Table</td><td>.....</td></tr>
            <tr><td>Inside Table</td><td>.....</td></tr>
        </table>
    </td></tr>
</table>

edited Dec 2, 2014 at 9:39

answered Dec 2, 2014 at 9:33

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

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

1 Comment

Fabrizio Calderan Over a year ago

bravo, I didn't noticed the lackness of tbody element: +1

Collectives™ on Stack Overflow

tableCss style with Nested tables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related