CODEWITHSUNDEEP
jquerycss
santa
santa

Reputation: 12512

Style first <TD> following row w/certain class

I need to style the first TD of every row that

I don't think I it is possible to do with just CSS, so I assume I need to use jQuery?

<tr>
    <td colspan="2" class="header">abc</td>
</tr>
<tr>
    <td>sasdas</td>
    <td>21234r</td>
</tr>

... something like?

$(".header").next("tr>td").css("width","20%");

Upvotes: 0

Views: 270

Answers (3)

Parrots
Parrots

Reputation: 26872

I'd recommend you use TH's for your header rows. Much cleaner, semantically valid, plus it then makes it so you don't have to use jQuery to take care of all this.

HTML:

<tr>
    <th colspan="2">abc</th>
</tr>
<tr>
    <td>sasdas</td>
    <td>21234r</td>
</tr>

CSS:

td:first-child {
width: 20%; }

Regarding only styling the row following the header: it looks like you're just trying to force that one column to be a 20% width? So there'd be no harm in using CSS that applies to it every first-column. Support for first-child is pretty solid in the browser landscape today (IE8 needs DOCTYPE declared, but it'll work. polyfil available for older versions if needed).

Upvotes: 0

No Results Found
No Results Found

Reputation: 102735

The :not() is valid CSS3, the :has() is jQuery/Sizzle only, the rest is CSS2.

$('tr:has(.header) + tr td:first-child:not([colspan])')

Upvotes: 0

Gabe
Gabe

Reputation: 50483

Since the class header is on a <td>, you need to get its parent <tr>. Then get the next <tr>, find the first <td>. It's kind of ugly really, seems like you could use <th> for you column headers and style them separated from a table cell.

Try this:

$(".header").closest('tr').next("tr").find('td:first').not('[colspan]').css("width","20%");

Upvotes: 2

Related Questions