Position:sticky for table headers

Written — Updated
  • .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;
    }
    

Thanks for reading! If you have any questions or comments, please send me a note on Twitter or Mastodon.