JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<body>
  <table id="one">
    <caption>Example 1. one length is specified</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
    <tr>
      <th>Applies to</th>
      <td>table-caption elements</td>
    </tr>
    <tr>
      <th>Inherited</th>
      <td>Yes</td>
    </tr>
  </table>
  <table id="two">
    <caption>Example 2. two lengths are specified</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
    <tr>
      <th>Applies to</th>
      <td>table-caption elements</td>
    </tr>
    <tr>
      <th>Inherited</th>
      <td>Yes</td>
    </tr>
  </table>
</body>

CSS

table{
   border-width: 1px;
   border-style: solid;
   border-collapse: separate;
   width: 400px;
 }
 #one{
   border-spacing: 0;
   margin-bottom: 20px;
 }
 #two{
   border-spacing: 5px 15px;
 }
 tr, th, td{
   border-width:1px;
   border-style: solid;
 }