Position:sticky for table headers

Written
  • .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. And if you enjoyed this, I also have a newsletter where I write about tech thoughts, interesting things I've read, and project updates each Thursday.

You can check out a recent issue, or enter your email below to subscribe.