HTML and CSS Reference
In-Depth Information
not limited to an all or none choice. In this section, you learn how to create a more open look for
your tables with the
border-bottom
property.
If you apply the
border-bottom
property to just the table cell selectors, you'll see a line along
the bottom of the table cells and no lines on the sides. However, you'll also see a break between
each of the cells. The break in the border occurs because the default behavior of browsers is
to render the cells with separate borders. To overcome this appearance, you'll need to specify
border-collapse: collapse
in the table selector. Then, you can set your desired border style,
width, and color for the
td
and
th
selectors via the
border-bottom
property. Here's an example:
table {
border-collapse: collapse;
margin: 20px;
width: 500px;
}
td, th {
border-bottom: 2px solid black;
padding: 10px;
width: 25%;
}
As shown in Figure 17-7, the border extends cleanly across the bottom of all the table cells, without
any breaks.
FiGure 17-7
You can also selectively include borders on the right or left, but you'll need to employ custom selec-
tors, such as a class or ID, to avoid unwanted borders. For example, the following code adds a bor-
der to the right of all table header cells:
th {
border-right: 2px solid black;
}
Although this does provide a visible separator between cells in the middle of the table, it also adds
one to the far right of the table, as shown in Figure 17-8.
