Computer >> Computer tutorials >  >> Programming >> Javascript

Usage of CSS border-collapse property


The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

Example

You can try to run the following code to learn how to work with border-collapse property

<html>
   <head>
      <style>
         table.one {
            border-collapse:collapse;
         }
         table.two {
            border-collapse:separate;
         }
         td.a {
            border-style:dotted;
            border-width:2px;
            border-color:#000000;
            padding: 20px;
         }
         td.b {
            border-style:solid;
            border-width:2px;
            border-color:#333333;
            padding:20px;
         }
      </style>
   </head>
   <body>
      <table class = "one">
         <caption>Border Collapse</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
      <br />
      <table class = "two">
         <caption>Border Separate</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
   </body>
</html>