Create the Striped Table with CSS

Striped Table is a table have clear delineation between the even and odd row:
View the example below, we have the HTML table like this:

 
First Name Last Name Email
Guts Betn gme34@mail.com
Lusis Grander grdLis@mail.com
Joe Bont bontbont@mail.com
Clever Jep Clevermend@mail.com


Add some CSS code below to making the difference between all of rows:

table {
border-collapse: collapse;
width: 100%;
font-size: 16px;
border: 1px solid #eee;
}
th,
td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #0b7cb1;
color: #fff;
}


Note: We use the nth-child CSS function with even param to change the background color of all even rows of the table.
You can change to odd if you want to do that with all odd rows of the table.

© 2019 4codev

Created with love by Sil.