title: Creating a css grid with non-scrolling column headers
body: <p>I'd like to use a pure CSS grid design to create a table-like display where each column has a &quot;header&quot; cell in the top row that does not scroll (in y) while the body of the grid will scroll.</p>
  <p>Here is a (non-working) example HTML as a starting point with some notations indicating my desired result:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
      .main-view {
          display: flex;
          flex-direction: column;
          overflow: auto;
          height: 8rem;
      }
      .grid-body {
          display: grid;
          grid-template-columns: max-content max-content 1fr;
          row-gap: 0.1rem;
          column-gap: 0.5rem;
          height: 8rem;
          margin: 0.5rem;
          border: solid 1px red;
          overflow: auto;
      }
      .grid-header {
          display: contents;
      }
      .grid-content {
          display: contents;
      }
      .grid-header label {
          font-weight: bold;
          text-align: center;
          background-color: lightgray;
          border-bottom: solid 1px black;
      }
      .grid-content label {
          text-align: center;
          height: 3rem;
          background-color: lightblue;
      }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main-view"&gt; 
      &lt;div class="grid-body"&gt;
          &lt;div class="grid-header"&gt;
              &lt;label&gt;Header A&lt;/label&gt;
              &lt;label&gt;Header B&lt;/label&gt;
              &lt;label&gt;Header C&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="grid-content"&gt;
              &lt;label&gt;Want header rows&lt;/label&gt;
              &lt;label&gt;above this body row&lt;/label&gt;
              &lt;label&gt;NOT to scroll but have correct column widths&lt;/label&gt;
              &lt;label&gt;Cell Label 01&lt;/label&gt;
              &lt;label&gt;Cell Label 02&lt;/label&gt;
              &lt;label&gt;Cell Label 03&lt;/label&gt;
              &lt;label&gt;Cell Label 04&lt;/label&gt;
              &lt;label&gt;Cell Label 05&lt;/label&gt;
              &lt;label&gt;Cell Label 06&lt;/label&gt;
              &lt;label&gt;Cell Label 07&lt;/label&gt;
              &lt;label&gt;Cell Label 08&lt;/label&gt;
              &lt;label&gt;Cell Label 09&lt;/label&gt;
              &lt;label&gt;Cell Label 10&lt;/label&gt;
              &lt;label&gt;Cell Label 11&lt;/label&gt;
              &lt;label&gt;Cell Label 12&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So, basically, I'd like the grid-header elements to be sticky while the grid-content elements can scroll.  However, I don't know how to style those elements to make this happen.</p>
  <p>If this cannot be accomplished with pure CSS, I wouldn't mind a hand with pure javascript code to create the effect (e.g., using two stacked grids and modifying the column widths of the top grid when the bottom grid column widths change).</p>
  <p>Thanks!</p>