First-child selector within table - html

Question

I have created a page which is a login portal to three separate websites. On this page, I have displayed the three login portals to said websites. I am trying to style it all with css and as few classes as possible (I need to fine tune my css skills).
What I have created is a table with three rows and two columns called loginPortals:
<table class="loginPortals">
<tbody>
<tr>
<td>Picture 1</td>
<td>Login form 1</td>
</tr>
<tr>
<td>Picture 2</td>
<td>Login form 2</td>
</tr>
<tr>
<td>Picture 3</td>
<td>Login form 2</td>
</tr>
</tbody>
</table>
I've only just begun the styling of the table, so it's very incomplete, however I'm struggling already. This is simplified, because I don't know exactly how it's going to look. Basically though, I want a border of some sort appearing between each row. The following doesn't quite achieve this as I had wanted:
.loginPortals{
width:100%;
}
.loginPortals tbody:first-child td{
border-top:1px solid #000;
}
.loginPortals tbody tr td{
border-bottom:1px solid #000;
padding:1em 0;
}
The first-child selector isn't working as I had thought it would. It is applying the top border to all the cells in all the rows. This is causing the line thickness to double in the middle of the rows.
How do I fix this so that the top border is only applied to the top row without creating extra classes or applying any inline style.
Thank you!
Joe

Answer 1

Your table borders need to be set to collapse:
.loginPortals{
width:100%;
border-collapse: collapse;
}
You can then omit the :first-child rule and just apply top and bottom borders for all your rows:
.loginPortals tbody tr td{
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:1em 0;
}
Also, just for your information, this selector:
.loginPortals tbody:first-child td
Means:
Select any td element
within a tbody
that is the first child of its parent.
And not:
Select any td element
within the first child of a tbody.
So since the tbody is the first and only child of .loginPortals, all the td elements in all their tr parents will be selected. See this answer for a visual explanation. You probably wanted this selector:
.loginPortals tbody tr:first-child td
But that's not necessary because all you have to do is collapse your table borders.

Answer 2

If I understand correctly, you have 3 forms and only want two lines - that's what I took from I want a border of some sort appearing between each row if that's the case, try this.
.loginPortals tr:first-child td{
border-top:none;
}
.loginPortals tbody tr td{
border-top:1px solid #000;
padding:1em 0;
}​
http://jsfiddle.net/u4v3Z/

Answer 3

I believe this would work...
td {border-top:1px solid #000;}

Answer 4

First of all, if you want to improve your CSS skills you should immediately stop using tables for layout.
Second, the :first-child pseudo class affects elements that are the first child of their parents. So since you only have one tbody element and it is the first child of the table writing tbody or tbody:first-child will yield the same results.
Edit: I think what you might be after here is tr:first-child td (you only want the table cells in the first table row to have a top border).
To solve your problem you could just go with border-bottom on all tds, unless you need a border in the top as well in which case you could set that border on the actual table or you could give all the tds a border-top and border-bottom. This of course renders a double border as you describe, but you can make the borders of a table collapse using border-collapse: collapse.
So in short: table {border-collapse: collapse}. But don't use tables for layout.