Boiled down, heavily annotated demo from https://jsfiddle.net/dPixie/byB9d/3/light/ on (relatively) fixed table headers (and footers added); JSFiddle at https://jsfiddle.net/2319nrfp/8/ . See also http://salzerdesign.com/test/fixedTable.html and http://salzerdesign.com/blog/?p=191

fixed-table-header.css

/*
Originally from: https://jsfiddle.net/dPixie/byB9d/3/light/

See also http://salzerdesign.com/test/fixedTable.html and http://salzerdesign.com/blog/?p=191
*/

html, body {
    height: 100%; /* Needed to ensure descendent heights retain 100%; could be avoided if didn't want percent on table height */
}

.anchor-table-header {
  position: relative; /* Ensures we are still flowing, but provides anchor for absolutely positioned thead below (absolute positioning positions relative to nearest non-static ancestor; clear demo at https://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed ) */
  padding-top: 2em; /* Provides space for the header (the one that is absolutely positioned below relative to here) */
  padding-bottom: 2em; /* Provides space for the footer (the one that is absolutely positioned below relative to here) */
  background-color: white; /* Header background (not just for div text inside header, but for whole header area) */
  height: 60%; /* Percent of the whole screen taken by the table */
}
.anchor-table-body {
  overflow-y: auto; /* Provides scrollbars when text fills up beyond the height */
  height: 100%; /* If < 100%, the header anchor background color will seep below table */
}

thead th, tfoot th {
  line-height: 0; /* th div will have own line-height; reducing here avoids fattening it by an inner div */
  color: transparent; /* Hides the non-div duplicated header text */
  white-space: nowrap; /* Ensures column header text uses up full width without overlap (esp. wrap no longer seems to work); this must be applied outside of the div */
}
thead th div, tfoot th div { /* divs are used as th is supposedly problematic */
  position: absolute; /* Puts relative to nearest non-static ancestor (our relative header anchor) */
  color: initial; /* Header must have an explicit color or it will get transparent container color */
  line-height: normal; /* Revert ancestor line height of 0 */
}
thead th div {
  top: 0; /* Ensures our header stays fixed at top outside of normal flow of table */  
}
tfoot th div { /* divs are used as th is supposedly problematic */
  top: calc(100% - 2em); /* Ensures our header stays fixed at top outside of normal flow of table */
}

td { /* Optional; just better for demoing */
  background: lightgray;
}

fixed-table-header.html

dddd
<div class="anchor-table-header">
  <div class="anchor-table-body">
    <table>
      <thead>
        <tr>
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>        
      </tfoot>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

gadfasdf