Organizing Data with Tables - Learn to Code HTML and CSS: Develop and Style Websites - page 243

Figure 11.6 A table with collapsed borders
Border Spacing Property
As the border-collapse property with the separate value allows borders to be
stacked up against one another, the border-spacing property can determine how much
space, if any, appears between the borders.
For example, a table with a 1 -pixel border around the entire table and a 1 -pixel border
around each cell will have a 2 -pixel border all around every cell because the borders stack
up next to one another. Adding in a border-spacing value of 4 pixels separates the
borders by 4 pixels (see Figure 11.7 ) .
Click here to view code image
1. table {
2. border-collapse: separate;
3. border-spacing: 4px;
4. }
5. table,
6. th,
7. td {
8. border: 1px solid #c6c7cc;
9. }
10. th,
11. td {
12. padding: 10px 15px;