How to use CSS to achieve the zebra pattern effect of changing the background color in every three rows of the table?

This article describes how to use CSS only to create a zebra pattern effect of changing background colors for a table with one loop every three rows. It is especially suitable for mobile application development environments without relying on JavaScript or window objects.

In mobile application development, beautiful table styles are crucial. This solution uses nth-child pseudo-class selector of CSS to cleverly realize background color changes in every three rows and one group. We define two different sets of background colors in six functions in a cycle.

The following CSS code achieves this effect:

 .table {
  border-collapse: collapse;
}

.table td {
  border: 1px solid #ddd;
  padding: 8px; /* Add inner margins to enhance readability*/
}

.table tr {
  background-color: #f9f9f9; /* Default background color*/
}

.table tr:nth-child(6n 1),
.table tr:nth-child(6n 2),
.table tr:nth-child(6n 3) {
  background-color: #ffffff; /* The first set of three lines of background colors*/
}

.table tr:nth-child(6n 4),
.table tr:nth-child(6n 5),
.table tr:nth-child(6n 6) {
  background-color: #cccccc; /* The second set of three lines of background colors*/
}

Code explanation:

• .table sets the table style to remove gaps between cells.
• .table td sets cell borders and inner margins to improve visual effects.
• .table tr sets the default background color.
• :nth-child(6n 1), :nth-child(6n 2), :nth-child(6n 3) Select the first three lines of each six lines and apply a white background.
• :nth-child(6n 4), :nth-child(6n 5), :nth-child(6n 6) Select the last three lines of each six lines and apply a gray background.

Apply the above CSS code to your<table class="table"> Elements can achieve the zebra pattern effect of changing the background color every three lines, without JavaScript code at all, and are compatible with various mobile application environments. You can adjust the background color and the value of <code>6n as needed to change the cycle period and style.

The above is the detailed content of How to use CSS to achieve the zebra pattern effect of changing the background color in every three rows of the table?. For more information, please follow other related articles on the PHP Chinese website!