Constructing Fixed Web Page Header

Fixed Header Layout

A common layout of web pages containing tables consists of a fixed header with information, search, and filter functions. The table has a fixed header with column names and functions and resides below the fixed header. Table rows should scroll below the fixed header of the page and the fixed table header.

Surprisedly, many front end frameworks have difficulty in constructing this fixed header layout.

Here is a simple solution with CSS that works equaly well with Foundation Framework and Bootstrap.

HTML

where ng-grid is the Angular-UI ng-grid that comes with a fixed header.

CSS

.my-header {
  position: absolute;
  top: 0%;
  height: 20%;
  width: 85%;
 }

.my-table {
  position: absolute;
  top: 20%;
  height: 80%;
}