| Every table data cell defined by the <td> tag has four borders: top, right, bottom, and left. The border-collapse property (Table 9.3) allows you to set a table so that each table data cell will share its borders with an adjacent table data cell, rather than create a separate border for each. Table 9.3. Border-Collapse ValuesVALUE | COMPATIBILITY |
|---|
collapse | IE5.5[*] , FF1, O5, S1.3, CSS2 | separate | IE5.5[*], FF1, O5, S1.3, CSS2 | inherit | IE5.5[*], FF1, O5, S1.3, CSS2 |
[*] For Windows only
In this example (Figure 9.3), the border between data cells has been collapsed into a single, thin red line. Figure 9.3. The top table shows the code without borders being collapsed, while the bottom table shows the same table with its borders collapsed. 
To collapse the borders in a table: 1. | border-collapse:
Type the border-collapse property name, followed by a colon (Code 9.3).
Code 9.3. The border-collapse property lets you remove all space between the table data cells, giving each side a single border.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Collapsing Borders Between Table Cells</title> <style type="text/css" media="screen"> table { border: 2px solid red; background-color: #fcc; } td { padding: 5px; border: 1px solid red; background-color: white; } .collapsus { border-collapse: collapse; } </style> </head> <body> <table > <caption>Results from the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> </body></html>
|
| 2. | collapse;
Type either of the following to determine how you want the borders in the table to be treated:
collapse, which will cause adjacent table data cells to share a common border; however, you won't be able to set cell-spacing if borders are collapsed. separate, which will cause each table data cell to maintain individual borders.
|
 Tips
The final visual results can vary between different browsers, unless you set the border style using CSS. If the borders being collapsed do not share the same border thickness, the thicker border will be shown. If they have the same thickness, then the border for the data cell to the left will be used.
|
