Recipe 8.7. Eliminating Gaps Between Table Cells

Problem

You want to remove gaps from one table cell to another.

Solution

Set the table to use collapse border model:

#shoppingcartTable {  border-collapse: collapse;  width: 100%;  border: 1px solid #666; } #shoppingcartTable th {   background: #888 url(th_bkgd.jpg) repeat-x;   font: italic 1.5em Georgia, "Times New Roman", Times, serif;   padding: .5em 0 .5em 7px;  text-align: left;  border-top: 1px solid #666;  border-bottom: 1px solid #666;  text-shadow: #ccc -2px 2px -2px; }

Discussion

By setting the border-collapse property to collapse, the browser removes the spacing between the table cells. Therefore when you apply a border to table cells, the result is a clean, uninterrupted line across the table row or column.

See Also

See Recipe 8.2 for more discussion about the border-collapse model.