CSS border-collapse Property

CSS border-collapse Property


CSS border-collapse Property
This property defines whether table cell borders are connected or separate. 
Syntax -
border-collapse: collapse | separate | inherit 
Now we will see The values with their description as follows -
Value
Description
separate
Borders are separated; each cell will display its own borders, and this is the default value.
collapse
Borders are collapsed into a single border. 
inherit
Inherits this property from its parent element.
 
NOTE -
The default value is separate, with each cell having a border with possible spacing. 
With a value of collapse, the borders appear to collapse on each other so that there’s no more spacing between the borders. 
The rendering here should illustrate the idea of the property clearly - 
 
Now we will see Example -
Example -
<!DOCTYPE html>
<html>

<head>
 
</head>

<body>

    <table border="1" style="border-collapse: collapse;">
        <tr>
        <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>
        </tr>
        <tr>
        <td>Cell 4</td><td></td><td>Cell 5</td>
        </tr>
        </table>
</body>

</html>
Output -
Example 2 - colors  
<!DOCTYPE html>
<html>

<head>
  <style>
      body{
          background-color: black;
          color: aquamarine;
      }
  </style>
</head>

<body>

    <table border="1" style="border-collapse: collapse; color: ;">
        <tr>
        <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>
        </tr>
        <tr>
        <td>Cell 4</td><td></td><td>Cell 5</td>
        </tr>
        </table>
</body>

</html>
Output -