AngularJS Directive and CSS for creating scrollable tables with fixed headers

Angular Core Dependency: 1.2.x

Module License: MIT

Added by: Sam Deering





Stars: 11

Watchers: 11

Forks: 2

Module Description

FixedHeader Build Status

AngularJS Directive and CSS for creating scrollable tables with fixed headers.

Creating scrollable tables with fixed headers that do not scroll off the screen is tricky due to the way tables work in HTML. We use the the techniques described by Miriam Salzer here: Don’t Mess With Tables – Pure CSS Fixed-Header Left-Aligned Tables, and wrap them up in a reusable AngularJS directive.


Add dist/fixed-header.js and dist/fixed-header.css to your index.html.

Add oci.fixedHeader as a module dependency on your module:

angular.module('app', ['oci.fixedHeader']);

Add oci.fixed-header as an attribute to your table:

<div class="my-table">
  <table oci.fixed-header>
  <!-- table markup goes here ... -->

Note the wrapper div with the class my-table. The oci.fixed-header directive adds wrapper divs around the table, so we need for our custom CSS below:

Add custom css to control the height of the table and the height of the header row: div.fixed-table-container-inner {
    /* the maximum height of the table: */
    max-height: 150px;

    border: 1px solid #aaaaaa;
    width: 150px;
} {
    /* the height of the header row */
    line-height: 30px;
} div.fixed-table-container {
    /* the height of the header row - this needs to match line-height above */
   padding-top: 30px;
} tr.hidden-header .th-inner {
  padding-right: 5px;


oci.fixed-header demo

Running Tests

  • Install global dependencies npm install -g karma phantomjs bower

  • Install local dependencies npm install

  • Install Bower dependencies bower install

  • Run tests karma start


Module stats last updated: 2018-01-12 16:00:07

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!