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

Basic usage knowledge points of mini programs (very comprehensive, recommended!)

Table of contents What to do when registering an ...

A detailed introduction to for/of, for/in in JavaScript

Table of contents In JavaScript , there are sever...

Teach you how to get the pointer position in javascript

The method of obtaining the position of the point...

Vue3.0 adaptive operation of computers with different resolutions

First we need to install some dependencies npm i ...

Online web tools and applications that web developers and designers cannot do without

You may remember that in the past articles we hav...

KVM virtualization installation, deployment and management tutorial

Table of contents 1.kvm deployment 1.1 kvm instal...

How to build a DHCP server in Linux

Table of contents 1. Basic knowledge: 2. DHCP ser...

MySQL Optimization: Cache Optimization

I am happy that some bloggers marked my article. ...

How to use Axios asynchronous request API in Vue

Table of contents Setting up a basic HTTP request...

WeChat applet calculator example

WeChat applet calculator example, for your refere...

Echarts Bar horizontal bar chart example code

Table of contents Horizontal bar chart Dynamicall...

Use CSS to achieve 3D convex and concave effects on images (convex out of the frame or concave in the frame)

Ⅰ. Problem description: Use CSS to achieve 3D con...

Implementation of nginx flow control and access control

nginx traffic control Rate-limiting is a very use...

How to use MySQL 5.7 temporary tablespace to avoid pitfalls

Introduction MySQL 5.7 aims to be the most secure...

MySQL calculates the number of days, months, and years between two dates

The MySQL built-in date function TIMESTAMPDIFF ca...