CODEWITHSUNDEEP
csshtml-tablecss-tables
TTCG
TTCG

Reputation: 9113

tableCss style with Nested tables

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>

Upvotes: 1

Views: 3057

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

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>

Upvotes: 2

Related Questions