The table table uses: nth-child() to achieve alternate color change and alignment

The table table uses: nth-child() to achieve alternate color change and alignment

Core code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table2n</title>
</head>

<body>
    <style>
        table {
            margin: 30px auto;
            border: #aaa 4px double;
            border-collapse: separate;
            border-spacing: 0px;
        }
        td,th {
            padding: 5px;
            width: 50px;
            border-color: #ddd;
            border-width: 1px;
            border-style: solid;
        }
        tr:nth-child(even){
            background: #eee;
        }
    </style>
    <table>
        <tr><th>Month</th><th>Financial Management</th><th>Salary</th> <th>Manuscript Fee</th><th>Total Income</th><th>Life</th><th>Shopping</th><th>Phone Fee</th><th>Transportation</th><th>Total Expenditure</th></tr>
        <tr><td>January</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr>
        <tr><td>February</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr>
        <tr><td>March</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr>
        <tr><td>April</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr><tr>
        <td>May</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr>
        <tr><td>June</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr>
        <tr><td>July</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr>
        <tr><td>August</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr>
    </table>
</body>
</html>

Rendering

For the above example, only alternate line colors are set, which prevents reading the wrong line, but the data in the same line is still confusing.
At this time, you can use the CSS:nth-child() child selector to add different styles to set different display effects for different columns.

        tr>td:nth-child(-n+5) {
            color: green;
            text-align: right;
        }
        tr>td:nth-child(n+6) {
            color: red;
            text-align: right;
        }
        tr>td:nth-child(1) {
            font-weight: bold;
            color: black;
            text-align: center;
        }
        tr>td:nth-child(5),tr>td:nth-child(10) {
            font-weight: bold;
        }

Rendering

After adding styles, it is easier to interpret the data and distinguish categories, with months in bold, red representing expenses, green representing income, and so on.

According to the introduction of CSS, the :nth-child(n) selector matches the Nth child element of its parent element, regardless of the type of element, and n can be a number, keyword or formula.
One thing to note is that the first child element is 1, not starting from 0. For example, the style of the first column of months is set above, and the :nth-child parameter is 1.

 tr>td:nth-child(1) {
            …
        }

You can also use the constants odd and even, which represent odd and even numbers respectively. For example, the background color of alternate rows is set like this.

tr:nth-child(even){
            background: #eee;
        }

Formulas can be used to achieve continuous selection or offset selection. The length of the cycle is expressed using the formula (an + b), where n is the counter (starting at 0) and b is the offset value.
The following settings are equivalent to using even.

tr:nth-child(2n){
            background: #eee;
        }

2n+1 has the same effect as odd

tr:nth-child(odd){
            background: #eee;
        }

2n+1

tr:nth-child(2n+1){
            background: #eee;
        }

Simply using n+b represents continuous selection.

tr>td:nth-child(-n+5) {
            …
        }

-n+b is an advanced usage, selecting from the first one, while n+b selects from the end forward.
Why -n? In fact, from the formula -n + 5 ≥ 0, we can deduce that n ≤ 5, which means 1~5.

The following is a supplement

CSS3: nth-child() pseudo-class selector, Table table odd and even row definition style

The power of CSS3 is amazing. While people are surprised, they have to feel sorry for its difficult road: a good standard can only be considered a "standard" if it is well supported by industry browsers. The CSS3 standard has been proposed for several years, but there are not many browsers that can implement it. Although some browsers can implement some specifications, what’s the use of it? Faced with more compatibility issues, CSSers can only sigh in despair. Even so, as forward-looking people, how can we stop moving forward? Today we will take a “preview” of a CSS3 pseudo-class selector “:nth-child()”.
Table table odd and even row definition style:

The power of CSS3 is amazing. While people are surprised, they have to feel sorry for its difficult road: a good standard can only be considered a "standard" if it is well supported by industry browsers. The CSS3 standard has been proposed for several years, but there are not many browsers that can implement it. Although some browsers can implement some specifications, what’s the use of it? Faced with more compatibility issues, CSSers can only sigh in despair. Even so, as forward-looking people, how can we stop moving forward? Today we will take a “preview” of a CSS3 pseudo-class selector “:nth-child()”.

grammar:

:nth-child(an+b)

Why choose her? Because I think this selector is the most knowledgeable one. Unfortunately, according to my test, the only browsers that can support it well are Opera 9+ and Safari 3+.

describe:

The parameter of the pseudo-class: nth-child() is an+b. If it is written in Chinese according to the description on w3.org, it may make people dizzy. In addition, the author's writing skills are limited, so I decided to avoid the an+b statement and split it into 5 parts in 5 ways to explain it.

The first method: simple digital serial number writing

:nth-child(number)

Directly matches the number-th element. The number parameter must be an integer greater than 0.

example:

li:nth-child(3){background:orange;}/*Set the background of the third LI to orange*/

Second method: multiple writing

:nth-child(an)

Matches all elements that are multiples of a. The letter n in the parameter an cannot be omitted. It is a symbol for multiple writing, such as 3n and 5n.

example:

li:nth-child(3n){background:orange;}/*Set the background of the 3rd, 6th, 9th, ..., and all LIs that are multiples of 3 to orange*/

The third type: multiple group matching

:nth-child(an+b) vs. :nth-child(an-b)

First, group the elements. Each group has a elements. b is the serial number of the members in the group. The letter n and the plus sign + cannot be omitted and their positions cannot be swapped. This is the hallmark of this writing method. a and b are both positive integers or 0. Such as 3n+1, 5n+1. But the plus sign can be changed to a minus sign, in which case it matches the abth items in the group. (In fact, an can also be preceded by a negative sign, but we will leave it for the next section.)

example:

li:nth-child(3n+1){background:orange;}/*Match the first, fourth, seventh, ..., and first LI in every group of 3*/
li:nth-child(3n+5){background:orange;}/*Match the 5th, 8th, 11th, ..., and the first LI in every group of 3 starting from the 5th*/
li:nth-child(5n-1){background:orange;}/*Match 5th-1=4, 10th-1=9, ..., multiples of 5 minus 1 LI*/
li:nth-child(3n±0){background:orange;}/*equivalent to (3n)*/
li:nth-child(±0n+3){background:orange;}/*equivalent to (3)*/

Fourth: Reverse multiple group matching

:nth-child(-an+b)

Here, one negative and one positive cannot be omitted, otherwise it will be meaningless. This is similar to :nth-child(an+1), both match the first one, but the difference is that it counts backwards, starting from the bth one and counting back, so it will not match more than b children at most.

example:

li:nth-child(-3n+8){background:orange;}/*matches the 8th, 5th and 2nd LI*/
li:nth-child(-1n+8){background:orange;}/* or (-n+8), matches the first 8 (including the 8th) LIs. This is more practical and is often used to limit the first N matches.*/

Fifth: Odd-even matching

:nth-child(odd) and :nth-child(even)

Matches elements with odd and even numbers respectively. An odd number (odd) has the same result as (2n+1); an even number (even) has the same result as (2n+0) and (2n).

Author's point of view: The style of the odd and even rows of the table can be written as

.table > tr:nth-child(even) > td {background-color: #ccc;} (even rows)
.table > tr:nth-child( odd ) > td {background-color: #ccc;} (odd rows)

This is the end of this article about how to use :nth-child() in a table to achieve alternate row color change and alignment. For more relevant table nth-child content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  How to install Element UI and use vector graphics in vue3.0

>>:  Implementation code of the floating layer fixed on the right side of the web page

Recommend

How to use the Marquee tag in XHTML code

In the forum, I saw netizen jeanjean20 mentioned h...

MySQL Series 14 MySQL High Availability Implementation

1. MHA ​By monitoring the master node, automatic ...

MySQL query sorting and paging related

Overview It is usually not what we want to presen...

MySQL series tutorial on understanding the use of union (all) and limit and exists keywords

Table of contents 1.union: You can add query resu...

my.cnf (my.ini) important parameter optimization configuration instructions

MyISAM storage engine The MyISAM storage engine i...

Summary of the process and common problems of connecting VS2019 to MySQL database

I started configuring various environments this a...

CSS implementation code for drawing triangles (border method)

1. Implement a simple triangle Using the border i...

Configure Mysql master-slave service implementation example

Configure Mysql master-slave service implementati...

How to use Vue+ElementUI Tree

The use of Vue+ElementUI Tree is for your referen...

How to use regular expressions to automatically match wildcard domain names in nginx

Nginx uses regular expressions to automatically m...

How to restore single table data using MySQL full database backup data

Preface When backing up the database, a full data...

Tips for using the docker inspect command

Description and Introduction Docker inspect is a ...

How to use JSX to implement Carousel components (front-end componentization)

Before we use JSX to build a component system, le...

Vue custom v-has instruction, steps for button permission judgment

Table of contents Application Scenario Simply put...

Summary of the use of TypeScript in React projects

Preface This article will focus on the use of Typ...