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

canvas.toDataURL image/png error handling method recommendation

Problem background: There is a requirement to tak...

Payment function implementation in vue project (WeChat payment and Alipay payment)

Table of contents Common payment methods in proje...

JDBC-idea import mysql to connect java jar package (mac)

Preface 1. This article uses MySQL 8.0 version Co...

The use of setState in React and the use of synchronous and asynchronous

In react, if you modify the state directly using ...

CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation

1. Add users and groups 1. Add mysql user group #...

Build a Docker private warehouse (self-signed method)

In order to centrally manage the images we create...

Docker realizes the connection with the same IP network segment

Recently, I solved the problem of Docker and the ...

HTML Tutorial: Collection of commonly used HTML tags (4)

These introduced HTML tags do not necessarily ful...

Detailed explanation of six web page image carousel effects implemented with JavaScript

Table of contents 1. When the mouse passes over t...

How to install and configure mysql 5.7.19 under centos6.5

The detailed steps for installing mysql5.7.19 on ...

Solution to the ineffective global style of the mini program custom component

Table of contents Too long to read Component styl...

HTML code text box limit input text box becomes gray limit text box input

Method 1: Set the readonly attribute to true. INPU...

Nginx access control and parameter tuning methods

Nginx global variables There are many global vari...

Calendar effect based on jQuery

This article example shares the specific code of ...

CSS horizontal progress bar and vertical progress bar implementation code

Sometimes it’s nice to see some nice scroll bar e...