Sleek table with Row spacing

Row spacing in a table

by Christopher O

HTML

<h2>Sleek table with Row spacing</h2>
<table>
  <tr>
    <th>Employee ID</th>
    <th>Name</th>
    <th>Gender</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>10001</td>
    <td>Thomas</td>
    <td>M</td>
    <td>32</td>
  </tr>
  <tr>
    <td>10002</td>
    <td>Sally</td>
    <td>F</td>
    <td>28</td>
  </tr>
  <tr>
    <td>10003</td>
    <td>Anthony</td>
    <td>M</td>
    <td>24</td>
  </tr>
</table>

CSS

table {
  border-collapse: separate;
  box-sizing: border-box;
  border-spacing: 0 15px;
  border: 0;
  
  width: 85%;
  margin: 0 auto;
}

td,
th {
  text-align: left;
  padding: 12px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

tr {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

tr:hover,
tr.active {
    background-color: #8fe4ff !important;
    color: #252b32 !important;
}

tr:nth-child(odd) {
    background: #eee;
}

th {
  background-color: #add8e6 !important;
  color: #252b32 !important;
}

tr td:first-child {
    border-left: 1px solid #ddd;
}
tr td:last-child {
    border-right: 1px solid #ddd;
}