How do you select the second column in a table with CSS when there aren't two 's in each ?

Question

<table>
    <tr>
        <td rowspan="2"><img src="[some image url here]"></td>
        <td>Puppy</td>
    </tr>
    <tr>
        <td>Kitten</td>
    </tr>
<table>

The code above will display a table, the first column is a picture which takes up 2 rows and the second column is composed of two rows each with a (random) word in it.

What I want to do is select the second column in the table and give each one a bottom border (I don't really want to do that, but let's use that as an example.)

So after researching I found the nth-child() pseudo-class so what I could do is:

table tr td:nth-child(2) {
    border-bottom: 1px solid gray;
}

This will work for the first row but in the second row it won't because the for the second column is the only in that so it while in the first row I can select the word 'puppy' by doing table tr td:nth-child(2) {}, in the second row I have to select it using table tr td:nth-child(1) {}.

So essentially, does anyone know a way to select the second column of a table in a situation like this without using id's or classes?

is :last-child not an option for you? – mothmonsterman Feb 05 '15 at 21:04 — mothmonsterman, Feb 05 '15 at 21:04

score 0 · Answer 1 · answered Feb 05 '15 at 21:07

0

Options would include either using

table tr td:last-child {
   border-bottom: 1px solid gray;
}

Or adding a class to the td and styling that class.

I recommend that class method of approach as it's fully backwards compatible.

answered Feb 05 '15 at 21:07

Chaosxmk

774
14
28

score 0 · Answer 2 · answered Feb 05 '15 at 21:14

Well for that specific example you could use an attribute selector like so:

HTML

<table>
    <tr>
        <td rowspan="2">Kitten</td>
        <td>Puppy</td>
    </tr>
    <tr>
        <td>Kitten</td>
    </tr>
<table>

CSS

td {
    background: green;
}

td[rowspan] {
    background: none;
}

jsFiddle

andi · Accepted Answer · 2015-02-05T21:25:10.833

For that specific table in your post, you could do this:

table tr td:not([rowspan]) {
    border-bottom: 1px solid gray;
}

i.e. selecting every td which does not have a rowspan attribute.

For a more complex table (but still assuming the second column is the needed one and that the first column contains only double-row cells), you could do this:

table tr td:first-child[rowspan] + td, table tr td:first-child:not([rowspan]) {
    border-bottom: 1px solid gray;
}

How do you select the second column in a table with CSS when there aren't two 's in each ?

3 Answers3