Jump to content

Alternating row styles not working...

Jim R

By Jim R
in CSS Help

 Share
Go to solution Solved by kicken,

Recommended Posts

Jim R Prolific Member

Jim R

Posted
Posted

I have a table created by a query.  Only the odd value is being printed.  Is that because the query just shows one row created for each instance of the search?


.playerTable tr:nth-child(odd) {
	background: #fff;
}

.playerTable tr:nth-child(even) {
	background: #ccc;
}
Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

The query produces close to 60 rows, but only the odd background values are being produced.  

 

Are the other columns even in the raw HTML code?

 

If no, then the problem is in the code to output the results and has nothing to do with CSS.

If yes, then I would guess that the alternate rows are not being output as valid HTML.

 

I'm afraid to ask, but can you post the code to produce the output.

Link to comment
Share on other sites
Jim R Prolific Member

Jim R

Posted
  • Author
Posted (edited)

Are the other columns even in the raw HTML code?

 

If no, then the problem is in the code to output the results and has nothing to do with CSS.

If yes, then I would guess that the alternate rows are not being output as valid HTML.

 

I'm afraid to ask, but can you post the code to produce the output.

 

 

 

Ha...yes...I'll try to break this down.  There are six columns.  The rows are broken into three sections.  

 

Header:

echo '<div class="roster">
<table class="playerTable" border="0" width="100%">;


	echo '<thead>
					<tr>
					<th class="num">#</th>
					<th class="top">The Top</th>
					<th class="height">HT</th>';
					
					if (current_user_can("access_s2member_level3")){
					echo '<th class="level">Level</th>';
					}
					echo'
					<th class="school">City (School)</th>';
					
					if (current_user_can("access_s2member_level3")){
					echo '<th class="summer">Summer Team</th>';
					}
					echo'
					<th class="college">College</th>
					</tr>
					</thead>';



 


This is the body for each instance:


echo '<tr>
<td>';

if ($line['grouping'] =='2') {
 echo $line['rankPos'] . $line['devPos']; } 
 
 echo '</td>
<td class="nowrap">';

	if ($line['wpID'] > '0') {
	echo '<a href="/tag/' . $line['wpSlug'] . '">'. $line['nameFirst'] . ' ' . $line['nameLast'] . '</a>';
	}
	else
	{
	echo  $line['nameFirst'] . ' ' . $line['nameLast'];
	}
echo '</td><td>'. $line['feet'] . '\'' . $line['inches'] . '"</td>';

	if (current_user_can("access_s2member_level3")){
	echo '<td>'. $line['level'] . '</td>';
	}
	
	if ($line['city'] !='') {
		echo '<td class="nowrap">' . $line['city'] . ' (' . $line['school'] . ')</td>';
	}
	  else {
	  echo '<td class="nowrap">'. $line['school'] . ' HS</td>';
	  }
	  
	  if (current_user_can("access_s2member_level3")){
	  echo '<td>'. $line['summer'] . '</td>';
	  }

	  echo '<td>';
	  if ($line['commit'] == '1') {
	  echo '
	  <strong>'. $line['college'] . '</strong>
	  ';}

echo '</td></tr>';




			
				


	Edited  by Jim R
	
	

			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					






	

	

	

		

			

				


	
		Jim R
	

				
				
					
						
Prolific Member
					
				
			

		

		

			

				


Jim R
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

I don't see the problem. What's the full HTML output of the table? Have you tried your browser's developer tools to see if/how/what CSS rules are being applied?


 


 


Use your browser's developer tools (F12) to inspect the table rows and see which css styles are being applied. You might have something that is overriding your row coloring, such as a white background applied directly to the table cells.


 


When I change the color of the background, it reflects the change.  


 


 


What I was trying to say in the OP was when I apply odd/even, it only produces the odd color.  If I make the odd color black and even white, it produces each row in black.  If I eliminate the odd and even CSS, it reverts back to the light gray.  


<table class="playerTable" border="0" width="100%">


<tfoot>
<tr>
<td colspan="8" align="right">(+) moved up; (d) debut; (s) switched from another position / <b>Colleges in bold print means committed</b></td>
</tr>
</tfoot>
<thead>
					<tr>
					<th class="num">#</th>
					<th class="top">The Top</th>
					<th class="height">HT</th><th class="level">Level</th>
					<th class="school">City (School)</th><th class="summer">Summer Team</th>
					<th class="college">College</th>
					</tr>
					</thead>
<tbody><tr>
<td>1</td>
<td class="nowrap">Jalen Blackmon</td><td>6'1"</td><td></td><td class="nowrap">Marion HS</td><td></td><td></td></tr>
<tbody><tr>
<td>2</td>
<td class="nowrap">Lane Sparks</td><td>6'1"</td><td></td><td class="nowrap">Greensburg HS</td><td></td><td></td></tr>
<tbody><tr>
<td>3</td>
<td class="nowrap">Khristian Lander</td><td>6'0"</td><td></td><td class="nowrap">Evansville (Reitz)</td><td></td><td></td></tr>
<tbody><tr>
<td>4</td>
<td class="nowrap">Luke Lacey</td><td>6'0"</td><td></td><td class="nowrap">Brownsburg HS</td><td></td><td></td></tr>
<tbody><tr>
<td>5</td>
<td class="nowrap">Jaylen Freeman</td><td>5'10"</td><td></td><td class="nowrap">Jeffersonville HS</td><td></td><td></td></tr>
<tbody><tr>
<td>6</td>
<td class="nowrap">Malik Stanley</td><td>5'10"</td><td></td><td class="nowrap">Indianapolis (Warren Central)</td><td></td><td></td></tr>
<tbody><tr>
<td>7</td>
<td class="nowrap">Colton Jones</td><td>6'1"</td><td></td><td class="nowrap">Valparaiso HS</td><td></td><td></td></tr>
<tbody><tr>
<td>8</td>
<td class="nowrap">Naylon Thompson</td><td>6'0"</td><td></td><td class="nowrap">Fort Wayne (Luers)</td><td></td><td></td></tr>
<tbody><tr>
<td>9</td>
<td class="nowrap">Quimari Peterson</td><td>5'10"</td><td></td><td class="nowrap">Gary (West)</td><td></td><td></td></tr>
<tbody><tr>
<td>10</td>
<td class="nowrap">Isaac Vencel</td><td>6'0"</td><td></td><td class="nowrap">Bloomington (North)</td><td></td><td></td></tr><tr><th colspan="7">Best of the Rest</th></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Braden Baker</td><td>5'9"</td><td></td><td class="nowrap">Fishers HS</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Sean Black</td><td>5'7"</td><td></td><td class="nowrap">Indianapolis (Warren Central)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Quinten Bragg</td><td>5'10"</td><td></td><td class="nowrap">Brownsburg HS</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Gus Ethison</td><td>5'11"</td><td></td><td class="nowrap">Arcadia (Hamilton Heights)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Weston Hamby</td><td>5'10"</td><td></td><td class="nowrap">North Manchester (Manchester)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Connor Hickman</td><td>6'1"</td><td></td><td class="nowrap">Bloomington (South)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Armann Hillman</td><td>6'0"</td><td></td><td class="nowrap">Indianapolis (Scecina)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Joseph Phinisee</td><td>5'11"</td><td></td><td class="nowrap">Lafayette (McCutcheon)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Cole Richmond</td><td>6'0"</td><td></td><td class="nowrap">Waterloo (DeKalb)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Will Shank</td><td>6'0"</td><td></td><td class="nowrap">Fort Wayne (Canterbury)</td><td></td><td></td></tr><tr><th colspan="7">Names to Know</th></tr><tr><th colspan="7" class="region">Region 1 :: North</th></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Dorian Harris</td><td>6'1"</td><td></td><td class="nowrap">Merrillville (Andrean)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Tarron White</td><td>5'9"</td><td></td><td class="nowrap">Fort Wayne (Northrop)</td><td></td><td></td></tr><tr><th colspan="7" class="region">Region 2 :: Central</th></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Kyle Chin</td><td>5'11"</td><td></td><td class="nowrap">Morristown HS</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Mason Gonzalez</td><td>6'0"</td><td></td><td class="nowrap">Indianapolis (Franklin Central)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Max Jacobsen</td><td>5'10"</td><td></td><td class="nowrap">West Lafayette (Harrison)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Jake Kinsey</td><td>5'9"</td><td></td><td class="nowrap">Middletown (Shenandoah)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Cole McDaniel</td><td>5'9"</td><td></td><td class="nowrap">New Castle HS</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Dylan Ritter</td><td>5'10"</td><td></td><td class="nowrap">Zionsville HS</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Larry Stone</td><td>5'6"</td><td></td><td class="nowrap">Indianapolis (Attucks)</td><td></td><td></td></tr><tr><th colspan="7" class="region">Region 3 :: South</th></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Cameron Banks</td><td>6'1"</td><td></td><td class="nowrap">Evansville (Central)</td><td></td><td></td></tr>
<tbody><tr>
<td></td>
<td class="nowrap">Brady Hunter</td><td>6'1"</td><td></td><td class="nowrap">Newburgh (Castle)</td><td></td><td></td></tr></tbody></table></div>




			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					






	

	

	

		

			

				


	
		Jim R
	

				
				
					
						
Prolific Member
					
				
			

		

		

			

				


Jim R
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
					(edited)
				
				
			
		

	


	

    

	

		
		

			

I added !important to the even line, and it didn't impact it.


 


 


I deleted the odd line, and it just reverted to the base background of the table.  It still doesn't show even in the development panel.  



			
				


	Edited  by Jim R
	
	

			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				
			
			



		

	


	
	
	
	
	
		
	
      
This thread is more than a year old. Please don't revive it unless you have something important to add.

			
				
				

	
		

			
Join the conversation

			

	
				
					You can post now and register later.
				
				If you have an account, sign in now to post with your account.
				
			

	
		

	




	
	
		
	
		
	
		
	
	
		
		
	
	

		

		


	
		Guest
	


		

			
				
					
				
					
						
    
							
  • 
								


	
	
	
	

								
							
    • 
						

					
				
					
				
			
			
				
					
						
							
						
						



    

		
		

			
		

		
			
 Reply to this topic...

		
		

			

				
					×
					  Pasted as rich text.   Restore formatting
				
			

		

		

			

				  Only 75 emoji are allowed.
			

		

		

			

				×
				  Your link has been automatically embedded.   Display as a link instead
			

		

		

			

			

		

		

			

				×
				  Your previous content has been restored.   Clear editor
			

		

		

			

				×
				  You cannot paste images directly. Upload or insert images from URL.
			

		

		
	

		
	

	

	

		

			×
			
		

		

	



						
					
				
					
				
					
				
			
			
    
				
					
						
					
						
					
						
							
  • 
								


    
	

    

								
							
    • 
						
					
				
				
					
  • 

	

    • 
				
			

		

	



			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
                

                


				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    • 
				
			

		

	



		






















	

		

			
Important Information

			
We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.