CODEWITHSUNDEEP
phpcss
user1371693
user1371693

Reputation: 41

chanigng color of rowx in table

hello i am working on the styling of table in PHP . I am stuck at only one point that i am not able to to change the colors of the rows of my table alternatively like odd rows should be displayed with white background and even with blue . i trie the followng css code but it didnot worked

tbody:nth-child(2n) { /* even rows */ 
  background-color:#eee;
}     
tbody:nth-child(2n+1) { /* odd rows */
  background-color:#ccc;
}

Upvotes: 1

Views: 76

Answers (4)

bitoshi.n
bitoshi.n

Reputation: 2318

If it is not because of your browser issue, please try this for css

table#tableid tr:nth-child(2n) { /* even rows */ 
  background-color:#eee;
}     
table#tableid tr:nth-child(2n+1) { /* odd rows */
  background-color:#ccc;
}

OR

table#tableid tr:nth-child(even) { /* even rows */ 
  background-color:#eee;
}     
table#tableid tr:nth-child(odd) { /* odd rows */
  background-color:#ccc;
}

Upvotes: 1

ToshNeox
ToshNeox

Reputation: 117

Perhaps you could try using a variable to change which style is used. So when you start the block, you define oddOrEven as 0, then you echo a row, then you set oddOrEven to 1. Every time a row is echoed, it changes which class is used based on oddOrEven.

Upvotes: 0

Stranger
Stranger

Reputation: 10611

Write two classes to for the styles of odd and even rows. And add the class alternately like this.

.odd_row{
   background-color:grey;
}
.even_row{
   background-color:white;
}

And in php,
<?php
for($i=0;$i<10;$i++)
{?>
      <tr class="<?php echp ($i%2==0)?'odd_row':'even_row';?>">
           <td>data1</td>
           <td>data2</td>
      </tr>
<?php
}
?>

Upvotes: 0

jogesh_pi
jogesh_pi

Reputation: 9782

i think jquery :even and :odd selector is the best option for cross browsers.. 

$('#selector:even').addClass('even_class');
$('#selector:odd').addClass('odd_class');

Upvotes: 1

Related Questions