CSS border collapse property is used to define the border of table to display collapsible.
HTML table tag when use to show table, By default, is a display as separate border model. The separate border model is a double border effect to display table. By default the border is separate format but if you want it collapse you can use this.
Syntax
|
1 |
border-collapse: put value here...; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> table{ border: 1px solid orange; border-collapse: separate; border-spacing: 15px; } table td{ border: 1px solid red; } </style> <table> <tr> <th>heading1</th> <th>heading2</th> </tr> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr> </table> |
Output
| heading1 | heading2 |
|---|---|
| row1, column1 | row1, column2 |
| row2, column1 | row2, column2 |
CSS border collapse values list
| Sr. No. | value | Description |
|---|---|---|
| 1 | collapse | This is Used to specify a table to display with collpase model. The value for this is collapse. |
| 2 | separate | This is Used to specify a table to display with separate model. The value for this is separate. |
| 3 | initial | Used to define as the property initial value. |
| 3 | inherit | Used to define the computed value of property on the elements parent. |