The border-collapse CSS property selects a table’s border model. This has a big influence on the look and style of the table cells.
The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.
In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.
Syntax
- border-collapse: collapse
- border-collapse: separate
- border-collapse: inherit
Values
separate
Is a keyword requesting the use of the separated-border table rendering model. It is the default value.
collapse
Is a keyword requesting the use of the collapsed-border table rendering model.
Example
<!DOCTYPE HTML> <html> <head> <title>CSS Tutorials</title> <style> th,td { border: solid 1px #CCC; } table { border-collapse: collapse; } </style> </head> <body> <table> <tr> <td>Browser</td> <td>Layout Engine</td> </tr> <td>Internet Explorer</td> <td>Trident</td> </tr> <td>Firefox</td> <td>Gecko</td> </tr> <td>Opera</td> <td>Presto</td> </tr> <td>Safari</td> <td>WebKit</td> </tr> </table> </body> </html>
Output
Browser | Layout Engine | Internet Explorer | Trident | Firefox | Gecko | Opera | Presto | Safari | WebKit |