Create a line-changing table with pure CSS

Create a line-changing table with pure CSS 45 replies

I wonder if you have used excel? When processing a large amount of data, does the design of Excel's line-changing color make you much more comfortable?
There are a lot of tutorials on the Internet that use jquery to create a line-changing table, but do you think it is worthwhile to load over 50 K Js for a small table? Even if your site has a large number of tables, it is not as convenient as using CSS. You can see how convenient this effect is.
First, write the table content as follows:

<table class="datalist" summary="list of members in EE Studay"><caption>Member List</caption><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr>............................................<tr><td>lightyear</td><td>W311</td><td>Mar 23th</td><td>Aries</td><td>1002908</td></tr></table>

This table can only use JavaScript or jquery to change the color of rows. If we want to use pure CSS to build a color-changing effect on the line, we need to make a small transformation of the table. Change to the following format:

<Table class = "datalist" summary = "List of members in EE Studay"> <caption> member list </caption> <tr> <TH scope = "col"> name </Th> <TH scope = "col"> class </Th> <TH scope = "col"> birthday </Th> <TH scope = "col"> constellation </ th> <TH scope = "col"> mobile </Th> </tr> <! -- Odd row --> <TD> Isaac </TD> <TD> W13 </TD> <TD> Jun 24th </TD> <TD> cancer </TD> <TD> 1118159 </TD> </tr> <tr class = "altrow"> <! -- Even row --> <TD> girlwing </TD> <TD> w210 </TD> <TD> Sep 16th </TD> <TD> Virgo </TD> <TD> 1307994 </TD> </tr> .............................. ................... </table>

Well, a friend who understands CSS and HTML should know what to do next. If you don't understand it, let me parse it. The TR tag represents the row of the table in the HTML language, and the TD tag represents the column. Next, we will start to write CSS as follows:

. Datalist {
Border: 1px solid #0058a3;/* Table border */
Font-family: Arial;
Border-collapse: collapse;/* overlapping Borders */
Background-color: # eaf5ff;/* Table background color */
Font-size: 14px;
}
. Datalist caption {
Padding-bottom: 5px;
Font: bold 1.4em;
Text-align: left;
}
. Datalist Th {
Border: 1px solid #0058a3;/* line name border */
Background-color: #4 bacff;/* row name background color */
Color: # ffffff;/* line name color */
Font-weight: bold;
Padding-top: 4px; padding-bottom: 4px;
Padding-left: 12px; padding-Right: 12px;
Text-align: center;
}
. Datalist TD {
Border: 1px solid #0058a3;/* cell border */
Text-align: left;
Padding-top: 4px; padding-bottom: 4px;
Padding-left: 10px; padding-Right: 10px;
}
. Datalist tr. altrow {
Background-color: # c7e5ff;/* line color */
}

I noticed thatBorder overlapping? This is the legendary line table.
Let's take a good look at it. No matter whether it's the color of the row or the color of the column, you can make a table with the style of the row or the two rows.
The effect of this example is as shown in this article.