[X(D)] Row Striping (Zebra Striping)
Row Striping (Zebra Striping)
tr:nth-child(2n) { background-color: #f9f9f9; }
tr:nth-child(2n+1) { background-color: #ffffff; }tr:nth-child(2n): Uses a specified row-sequence-number formula (2n) to apply a very light gray background (#f9f9f9) to the 2nd, 4th, 6th, and all even-numbered rows.tr:nth-child(2n+1): Uses a specified row-sequence-number formula (2n+1) to keep the 1st, 3rd, 5th, 7th (sample), and all odd-numbered rows pure white (#ffffff).
Combined Effect: Alternating row colors make it much easier for the human eye to track data horizontally across wide tables without losing place.
Targeting a Specific Row (e.g., 7th Row)
If you want to style a specific single row—such as the 7th row—using its position:
Correct Syntax
To modify the 7th row specifically, drop the letters and use a plain integer:
tr:nth-child(7) { background-color: #f0f0f0; }Key Rules for Numbers in :nth-child():
- Only integers: Use plain numbers like
1,7, or12. - No text suffixes: Writing
1st,2nd,3rd, or7thwill render the selector invalid.
| Row # | Product Name | Category | Price |
|---|---|---|---|
| 1st Row | Wireless Mouse | Electronics | $25.00 |
| 2nd Row | Mechanical Keyboard | Electronics | $75.00 |
| 3rd Row | LED Monitor | Displays | $150.00 |
| 4th Row | USB-C Hub | Accessories | $20.00 |
| 5th Row | Desk Lamp | Furniture | $35.00 |
| 6th Row | Ergonomic Chair | Furniture | $200.00 |
| 7th Row (Sample) | Standing Desk | Furniture | $350.00 |
| 8th Row | Laptop Stand | Accessories | $30.00 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zebra Striping Table Example</title>
<style>
/* Table Container Styling */
.table-container {
font-family: Arial, sans-serif;
margin: 20px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Base Table Styling */
table {
width: 100%;
border-collapse: collapse;
background-color: #ffffff;
text-align: left;
}
th,
td {
padding: 12px 16px;
border-bottom: 1px solid #eee;
}
th {
background-color: #007bff;
color: #ffffff;
}
/* Row Striping (Zebra Striping) Rules */
tr:nth-child(2n) {
background-color: #f9f9f9;
/* Applied to 2nd, 4th, 6th, etc. */
}
tr:nth-child(2n+1) {
background-color: #ffffff;
/* Applied to 1st, 3rd, 5th, 7th, etc. */
}
/* Specific row highlight example for the 7th row */
tr:nth-child(7) {
background-color: #e3f2fd;
/* Light blue accent for the 7th row sample */
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Row #</th>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st Row</td>
<td>Wireless Mouse</td>
<td>Electronics</td>
<td>$25.00</td>
</tr>
<tr>
<td>2nd Row</td>
<td>Mechanical Keyboard</td>
<td>Electronics</td>
<td>$75.00</td>
</tr>
<tr>
<td>3rd Row</td>
<td>LED Monitor</td>
<td>Displays</td>
<td>$150.00</td>
</tr>
<tr>
<td>4th Row</td>
<td>USB-C Hub</td>
<td>Accessories</td>
<td>$20.00</td>
</tr>
<tr>
<td>5th Row</td>
<td>Desk Lamp</td>
<td>Furniture</td>
<td>$35.00</td>
</tr>
<tr>
<td>6th Row</td>
<td>Ergonomic Chair</td>
<td>Furniture</td>
<td>$200.00</td>
</tr>
<tr>
<td>7th Row (Sample)</td>
<td>Standing Desk</td>
<td>Furniture</td>
<td>$350.00</td>
</tr>
<tr>
<td>8th Row</td>
<td>Laptop Stand</td>
<td>Accessories</td>
<td>$30.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Comments
Post a Comment