Reputation: 1
<div class="showtable-page">
<table class="layout display responsive-table">
<thead>
<tr><th>Show</th><th>Address</th><th>Location</th><th>Dates & 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
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*/
}
Upvotes: 3
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
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
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