HTML and CSS Reference
In-Depth Information
Getting those borders to collapse
There is another way to solve the border dilemma, besides the
border-spacing
property. You can use a CSS property called
border-collapse
to collapse the borders so that there is no border
spacing at all. When you do this, your browser will ignore any border
spacing you have set on the table. It will also combine two borders
that are right next to each other into one border. This “collapses” two
borders into one.
Here's how you can set the
border-collapse
property. Follow along
and make this change in your “journal.css” file:
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
Add a border-col
lapse property
and set its value
to “collapse”.
Save the file and reload; then check out the
changes in the border.
Now yo
u just have one sing
le border
around
all the table cells.
Just what
we wan
ted, and don't you
agree that
the ta
ble looks much clean
er now?
