JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>#table1 border-collapse: separate (default):</h2>
<table id="table1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<h2>#table2 border-collapse: collapse:</h2>
<table id="table2">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

CSS

table, td, th {
  border: 1px solid black;
}

#table1 {
  border-collapse: separate;
  border-spacing: 0px;
}

#table2 {
  border-collapse: collapse;
}
table td {
  background-color: #FFFFFF;
  position: relative;
  /*this border should be visible on both tables*/
  border: 1px solid red;
}