Border on every other row's cell

table > tbody > tr + tr > td { }

[vol7ron]

So, using selectors I have:

table > tbody > tr + tr > td { 
 border-bottom:  1px solid #EFEFEF !important; 
 } 
 table > tbody > tr:last-child > td:last-child { 
 border-bottom:  0px !important; /* removes border from last cell in table */ 
 }

The issue here is that it only does every other for the first two. It looks like:

1
2
--
3
--
4
--
5
--
6
--

When I want it to look like:
1
2
--
3
4
--
5
6
--

I know the issue is that it is only reading tr + tr once, but how can I get it to repeat that? Note: I've tried taking away the "table > body > " -- I don't know how to repeat in CSS.
table > tbody > tr + tr > td

[edited by: DrDoc at 5:54 pm (utc) on July 3, 2008]
[edit reason] fixed [codes] [/edit]

[Fotiman]

The issue is not that it's only reading the tr + tr once. The issue is that tr + tr means "match every tr element that is preceeded by a tr element", so your first tr doesn't match that, but every tr after that is going to have been preceeded by a tr, thus your rule matches all the rest.

You might be able to get around it by wrapping each 2 tr elements in a tbody element:

<table> 
 <tbody> 
  <tr> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>2</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>4</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>6</td> 
  </tr> 
 </tbody> 
</table> 

[DrDoc]

You also want to consider rule specificity.

[swa66]

n-th child selectors are your easiest standard solution (but they are only very marginally supported by current browsers, even if there is some of them already in CSS 2.1).

[w3.org...]

Aside of that, if you can give the rows even and odd classes: it'll make your life a lot easier if you still need to get e.g. IE6 on board.
Also try to make the first element special, not the last, as IE only does :first-child not :last-child (I know childish ;-) of them browser crafters, but unfortunately something we're forced to live with)

[vincevincevince]

The other stock solution with fixed cell size is a repeated background image on the whole table which happens to match every other row. It feels dirty but works surprisingly smoothly, especially now most browsers have gone to page zoom rather than text zoom.

[StoutFiles]

Output the tables with a php loop. Something like...

for($i=1, $i<=6; $i++)
{
//if $i is odd
{//normal table}
else
{//table with no border}
$i++;
}

[SuzyUK]

OH for :nth-child, amazing power would come to table formatting if we could get that one properly supported eh! ;)

if it's a small table or fairly controlled with amount of rows involved a yuk rule like this might do you..

this uses specificity, as mentioned, to overide each row, the mjore rows the more selectors each rule will need, this is for 6 as per your example..

/* rows 1, 3 & 5 - count the tr selectors */
tr td,
tr+tr+tr td,
tr+tr+tr+tr+tr td
{border: 0;}

/* rows 2, 4 & 6 - count the tr selectors */
tr+tr td,
tr+tr+tr+tr td,
tr+tr+tr+tr+tr+tr td
{border-bottom: 3px solid #f00;}

or as advised above if you use :first-child, in combination with the adjacent siblings and you half the rule

/* rows 2, 4 & 6 - count the tr selectors */
tr:first-child+tr td,
tr:first-child+tr+tr+tr td,
tr:first-child+tr+tr+tr+tr+tr td
{border-bottom: 3px solid #f00;}

just in case, both of the above solutions will only have support in IE7 and above though