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?
Search WWH ::

Custom Search