HTML and CSS Reference
In-Depth Information
column. Doing so puts a total of
30
pixels of
padding
between the two columns
while keeping each cell the same size. We don't need to apply any left or right
padding
to the
<td>
elements that span two columns.
We'll add all of these horizontal paddings using the
:first-of-type
,
:last-
of-type
, and
:only-of-type
pseudo-class selectors. These pseudo-class se-
lectors work very similarly to the
:last-child
pseudo-class selector we've
used before.
The
:first-of-type
pseudo-class selector will select the first element of its
type within a parent element. In our case, the
td:first-of-type
selector will
select the first
<td>
element within a
<tr>
element. Then, the
:last-of-
type
pseudo-class selector will select the last element of its type within a parent
element.
Again, in our case, the
td:last-of-type
selector will select the last
<td>
element within a
<tr>
element. Lastly, the
:only-of-type
pseudo-class se-
lector will select an element if it's the only element of its type within a parent ele-
ment. Here, the
td:only-of-type
selector will only select a
<td>
element if
it's the only
<td>
element within a
<tr>
element, such as when a
<td>
element
spans two columns.
Our styles are a little complex, but they're flexible in addressing the needs of our
table. These new styles include the following:
1.
tbody td {
2.
border-top: 1px solid #dfe2e5;
3.
padding-top: 21px;
4.
}
5.
tbody td:first-of-type {
6.
padding-right: 15px;
7.
}
8.
tbody td:last-of-type {
9.
padding-left: 15px;
10.
}
11.
tbody td:only-of-type {
12.
padding-left: 0;
13.
padding-right: 0;
14.
}
12.
Our schedule—and the tables that display it—is coming together. Let's adjust a
few of the styles on existing elements to clean up the design. We'll start by making
all of the links within the table a medium gray. If we target only the
<a>
elements
Search WWH ::
Custom Search