Alternating row styles not working...

Jim R · December 1, 2017

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;
}

requinix · December 1, 2017

I'm not sure what reply to use so you can choose:

(a) the CSS has nothing to do with a value being "printed"

(b) if there's only one row then of course only the rule for odd rows will be used

Jim R · December 1, 2017

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

Psycho · December 1, 2017

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.

Jim R · December 1, 2017

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 December 1, 2017 by Jim R

Jim R · December 1, 2017

This is what it looks like:

The first section is ordered by ranking. The second section are players listed alphabetically from the whole state. The third section is broken up by geography.

Screen_Shot_2017-12-01_at_1.40.22_PM.png

Edited December 1, 2017 by Jim R

Jim R · December 1, 2017

I didn't put all the code, just the code printing the rows.

requinix · December 1, 2017

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?

kicken · December 1, 2017

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.

Jim R · December 1, 2017

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>

Jim R · December 1, 2017

It's showing the odd but not the even (gray)

Screen_Shot_2017-12-01_at_2.25.05_PM.png

Edited December 1, 2017 by Jim R

Jim R · December 1, 2017





.playerTable tr:nth-child(odd) {

	background: #fff;


}


.playerTable tr:nth-child(even) {

	background: #ccc;

}

Jim R · December 1, 2017

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 December 1, 2017 by Jim R

kicken · December 1, 2017

You appear to be wrapping every row in a (incomplete) <tbody> tag. That means every row is a first-child (in other words row 1 / odd).

Edited December 1, 2017 by kicken

Jim R · December 1, 2017

You appear to be wrapping every row in a (incomplete) <tbody> tag. That means every row is a first-child (in other words row 1 / odd).

Bingo!

Thank you.

Sign In

Alternating row styles not working...

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information