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.
dist/fixed-header.css to your
oci.fixedHeader as a module dependency on your module:
oci.fixed-header as an attribute to your table:
Note the wrapper div with the class
directive adds wrapper divs around the table, so we need
div.my-table for our custom CSS below:
Add custom css to control the height of the table and the height of the header row: