CODEWITHSUNDEEP
htmlcsscss-selectorshtml-table
user3068708
user3068708

Reputation: 1

How to select first and last child of this table?

<div class="showtable-page">
    <table class="layout display responsive-table">
        <thead>
            <tr><th>Show</th><th>Address</th><th>Location</th><th>Dates &amp; Hours</th></tr>
        </thead>
        <tbody>
            <tr>
                <td class="organisationnumber">ABC</td>
                <td>
                    <ul style="list-style-type: none;">
                        <li>KLM</li>
                        <li>OPQ</li>
                    </ul>
                </td>
                <td>US</td>
                <td>Mon-Fri 9AM - 6PM</td>
            </tr>

For CSS, how do I get to table tr td:first-child, table tr th:first-child for this table? The style sheet has a base styles for tables in general, I need to change the padding on this particular table.

Thanks

Upvotes: 0

Views: 3112

Answers (4)

codingrose
codingrose

Reputation: 15709

Give ID to this table say mytable.

The id attribute specifies a unique id for an HTML element.

Try:

HTML:

<table id="mytable" class="layout display responsive-table">

CSS:

#mytable th:first-child{
    /* your styles*/
}
#mytable td:first-child{
    /* your styles*/
}

DEMO here.

Upvotes: 3

Megaroeny
Megaroeny

Reputation: 827

To select the last child you need for example:

tr td:last-child

Keep in mind the :last-child Is CSS3. So it won't be supported in older browsers ( < IE 9)

Upvotes: 2

ryguy21
ryguy21

Reputation: 46

Use class selectors, or if necessary, add an ID to the table and use that (though I tend to avoid using ID selectors in CSS).

The CSS would look like this:

.layout.display.responsive-table th:first-child
{
    /* your css here */
}

.layout.display.responsive-table td:first-child
{
    /* your css here */
}

If that doesn't work, look at this article to figure out how to override other selectors with yours. It looks like you're using Bootstrap (from the table-responsive class) so you might need to add several items to get this working.

Upvotes: 0

Nis
Nis

Reputation: 1477

You have already given the answer.

This should work perfectly fine. 

table tr td:first-child, table tr th:first-child{

}

Can you elaborate what is the problem in this ?

Upvotes: 0

Related Questions