HTML and CSS Reference
In-Depth Information
Table Striping
In the effort to make tables more legible, one common design practice is to “stripe” table
rows with alternating background colors. This makes the rows clearer and provides a visual
cue for scanning information. One way to do this is to place a class on every other
<tr>
element and set a background color to that class. Another, easier way is to use the
:nth-
child
pseudo-class selector with an
even
or
odd
argument to select every other
<tr>
element.
Here, our table of books uses the
:nth-child
pseudo-class selector with an
even
argu-
ment to select all even table rows within the table and apply a gray
background
. Conse-
quently, every other row within the table body is gray (see
Figure 11.9
).
1.
table {
2.
border-collapse: separate;
3.
border-spacing: 0;
4.
}
5.
th,
6.
td {
7.
padding: 10px 15px;
8.
}
9.
thead {
10.
background: #395870;
11.
color: #fff;
12.
}
13.
tbody tr:nth-child(even) {
14.
background: #f0f0f2;
15.
}
16.
td {
17.
border-bottom: 1px solid #c6c7cc;
18.
border-right: 1px solid #c6c7cc;
19.
}
20.
td:first-child {
21.
border-left: 1px solid #c6c7cc;
22.
}
Search WWH ::
Custom Search