CSS Border Collapse
In CSS, the CSS border-collapse property defines as it allows you which a border should be displayed around a table cell.
you need to set the appropriate values of the CSS border-collapse property to display the border of your table in
different styles, therefore, table cell borders should collapse together or remain separate.
CSS syntax for Border Collapse
|
1 |
border-collapse: collapse|separate|inherit|initial; |
table (like a table through display: inline-table or display: table).
There are two values which are used mostly:
1. separate (default) – when using separate value for border-collapse, all table cells have their own independent
borders and there may be space between those cells as well.
finally, the effect comes, When cells are separated, the distance between cells is defined by the border-spacing property.
2. collapse – when using collapse value in which both the space and the borders between table cells collapse
therefore there is only one border and no space between cells.
therefore, the effect comes, When cells are collapsed, the border-style value of inset behaves like groove, and outset
behaves like the ridge.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html> <head> <style type = "text/css"> table.first {border-collapse:collapse;} table.second {border-collapse:separate;} td.one { border-style:solid; border-width:4px; border-color:#FF4500; padding: 15px;} td.two { border-style:solid; border-width:3px; border-color:#FF8C00; padding:15px;} </style> </head> <body> <table class = "first"> <caption><h4>Collapse Border<h4></caption> <tr><td class = "one"> Paragraph first, Collapse Border property </td></tr> <tr><td class = "two"> Paragraph second, Collapse Border property</td></tr> </table> <table class = "second"> <caption><h4>Separate Border</h4></caption> <tr><td class = "one"> Paragraph first, Collapse Border property </td></tr> <tr><td class = "two"> Paragraph second, Collapse Border property</td></tr> </table> </body> </html> |
Therefore, as seen in the above example when we select border-collapse value to collapse the table cell collapse
an outer border with each other and in another border-collapse value is separate the table cell, separated with each other.
Collapse Border Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> table {border-collapse: collapse;} table, td, th { border: 5px solid #FF7F50; padding: 10px;} </style> </head> <body> <table> <tr> <th>Employee Name</th> <th>Father Name</th> </tr> <tr> <td>Saumya Tripathi</td> <td>Ramesh Tripathi</td> </tr> <tr> <td>Teepu Gupta</td> <td>Ganesh Gupta</td> </tr> </table> </body> </html> |
IN the above example, see that border-collapse property value use collapse, table cell collapse with each other such as employee name column and Father Name column.
About Author
