Position:sticky for table headers

.table-wrapper {
max-width: 700px;
overflow: scroll;
}

table {
position: relative;
border: 1px solid #ddd;
border-collapse: collapse;
}

td, th {
white-space: nowrap;
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}

// The heading of our table
th {
background-color: #eee;
position: sticky;
top: -1px;
z-index: 2;

// The first cell that lives in the top left of our spreadsheet
&:first-of-type {
  left: 0;
  z-index: 3;
}
}

// The first column that we want to stick to the left
tbody tr td:first-of-type {
background-color: #eee;
position: sticky;
left: -1px;
z-index: 1;
}