CSS Property Value How to - Border separate vs collapse

Question

We would like to know how to border separate vs collapse.

Answer


<!-- w  w w .  j  a  va2 s  .  c o m-->
<html>
<head>
<style>
h1 {
  font-size: 18pt;
}

p {
  font-size: 12pt;
}

table.one {
  border-collapse: collapse;
}

table.two {
  border-collapse: separate;
}

td.a {
  border-style: dotted;
  border-width: 3px;
  border-color: #000000;
  padding: 10px;
}

td.b {
  border-style: solid;
  border-width: 3px;
  border-color: #333333;
  padding: 10px;
}

table {
  margin-bottom: 20px;
}
</style>
</head>
<body>
  <h2>border-collapse:collapse</h2>
  <table class="one">
    <tr>

      <td class="a">cell a collapse</td>

      <td class="b">cell b collapse</td>

    </tr>

    <tr>

      <td class="b">cell b collapse</td>

      <td class="a">cell a collapse</td>

    </tr>

  </table>


  <h2>border-collapse:separate</h2>
  <table class="two">

    <tr>

      <td class="a">cell a separate</td>

      <td class="b">cell b separate</td>

    </tr>

    <tr>

      <td class="b">cell b separate</td>

      <td class="a">cell a separate</td>

    </tr>
  </table>


</body>

</html>

The code above is rendered as follows: