How to apply nth-child to tables generated from database - php

Question

I'm having trouble setting up some css code for a table I'm generating using php from a database. I want every even row to have a different background-color, so I tried using nth-child(even) for this, but it doesn't seem to work for some reason. Here's my code:
style.css:
#usertable {
border-collapse: collapse;
font-family: "Trebuchet MS", Arial;
}
#usertable td, #usertable th {
border: 1px solid black;
background-color: rgb(228,227,227);
padding: 8px;
}
#usertable tr:nth-child(odd){background-color: rgb(115,115,115);}
admin.php:
<table id="usertable">
<tr>
<th> Id: </th>
<th> Username: </th>
<th> Rights: </th>
</tr>
<?php
$userquery = "SELECT id, username, strength FROM users";
$result = $conn->query($userquery) or die($conn->error);
while ($row = $result->fetch_assoc()) { ?>
<tr>
<td> <?php echo $row['id']; ?> </td>
<td> <?php echo $row['username']; ?> </td>
<td>
<form method="post" action="">
<input type="number" min="0" max="255" name="newrights" value=" <?php echo $row['strength']; ?> ">
<input type="text" name="idnumber" hidden="true" value=" <?php echo $row['id']; ?> ">
<input type="text" name="usertochange" hidden="true" value=" <?php echo $row['username']; ?> ">
<input type="submit" value="Update">
</form>
</td>
</tr>
<?php
}
?>
</table>

Answer 1

There is some markup error with your code
<table id="usertable">
<tr> <!--Add this-->
<th> Id: </th>
<th> Username: </th>
<th> Rights: </th>
</tr> <!--Add this-->
<?php
$userquery = "SELECT id, username, strength FROM users";
$result = $conn->query($userquery) or die($conn->error);
while ($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row['id'] . "</td><td>" . $row['username'] . "</td><td>";
echo "<form method=\"post\" action=\"\">
<input type=\"number\" min=\"0\" max=\"255\" name=\"newrights\" value=\"" . $row['strength'] . "\">
<input type=\"text\" name=\"idnumber\" hidden=\"true\" value=\"" . $row['id'] . "\">
<input type=\"text\" name=\"usertochange\" hidden=\"true\" value=\"" . $row['username'] . "\">
<input type=\"submit\" value=\"Update\">
</form></td></tr>";
}
?>
Also looks like you have used many slaces so i suggest you to check table markup on browser
Updated: Add
#usertable td:nth-child(odd) { background-color: #efefef;}
Do not use tr as you have given background color to td and th initially

Answer 2

Why don't you sue some CSS class in each alternate table row?
Ex:
HTML
<tr class="bg-red">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="bg-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
CSS
<style type="text/css">
.bg-blue{
background-color: blue;
}
.bg-red{
background-color: red;
}
</style>
I think this will simplify your code & make it easy to read.
Example for Dynamic Data
<?php
$users[] = array('fname'=>'Jill', 'lname'=>'Smith', 'age'=>50);
$users[] = array('fname'=>'Eve', 'lname'=>'Jackson', 'age'=>94);
$rowColClass = 'bg-blue';
foreach ($users as $key => $value)
{
echo "<tr class='$rowColClass'>";
echo "<td>$value[fname]</td>";
echo "<td>$value[lname]</td>";
echo "<td>$value[age]</td>";
echo "</tr>";
if($rowColClass == 'bg-blue')
$rowColClass = 'bg-red';
else
$rowColClass = 'bg-blue';
}
?>