Create a line-changing table with pure CSS

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.