td, th {
  font-family: Segoe UI;
  font-weight: 100;
  padding: 10px;
  color: #000;
  font-size: 10pt;
  margin-bottom: 15px;
}
table, th, td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-collapse: collapse;
}
th {
  font-weight: 100;
  font-size: 12pt;
}

tr.clave, td.clave {
  color: #FFF;
  background-color: red;
}

tr.clave2, td.clave2 {
  color: #FFF;
  background-color: black;
}

tr.clave3, td.clave3 {
  color: #000;
  background-color: yellow;
}

/* This is what we are focused on */
.table-wrapper{
  overflow-y: scroll;
  height: 100%;
}

.table-wrapper th{
    position: sticky;
    top: 0;
}

/* A bit more styling to make it look better */
.table-wrapper{
  background: white;
}

table{
  border-collapse: collapse;
  width: 100%;
}

th{
    background: #DDD;
}