HTML CSS Vertical Scroll Table Example

How to get the contents inside of a table to scroll vertically with a fixed header. The CSS portion of this solution was provided by nkmol on

Use the following in your css file or style tags.

div {
  display: inline-block;
  height: 350px;
  overflow: auto;
  width: 100%;

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;

table {
  border-collapse: collapse;

th {
  background-color: #808080;
  color: #fff;

td {
  padding: 1em .5em;

table tr {
  color: #212121;

table tr:nth-child(odd) {
  background-color: #EAEAEA

The data table should look similar to the following:

  <table class="table table-striped">
        <th class="text-left">Index</th>
        <th class="text-left">Ticker</th>
        <th class="text-left">Price</th>
        <th class="text-left">Changes</th>
      <ng-container *ngFor="let item of dataArr" >
      <tr class="">

        <td class="text-left">{{item.indexName | slice:0:15  }}</td>
        <td class="text-left">{{item.ticker}}</td>
        <td class="text-left">{{item.price | number:'2.1-2'}}</td>
        <td class="text-left">{{item.changes}}</td>

The rest of this how to article is not necessary. It is the rest of the code for getting major stock indexes.

If you do not have a service already, from your angular 2+ application root folder. Type type following CLI command in the terminal.

ng g s services/financial-stock

In your service file paste the following code.

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { SharedService } from './shared.service';

export interface MajorIndexesResult {
  majorIndexesList: any;

  providedIn: 'root'
export class YOUR-SERVICE-NAME {

  constructor(private http: HttpClient) { }

  getMajorIndexes() {
    const URL = '';
    return this.http.get<MajorIndexesResult>(URL);

In your component.ts file should have the following:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { StockFmpService } from './../../../services/stock-fmp.service';
import { HttpErrorResponse } from '@angular/common/http';
import { Subscription } from 'rxjs';
export interface Entity {
  ticker: string;
  changes: number;
  price: number;
  indexName: string;
  selector: 'app-major-indexes-table',
  templateUrl: './major-indexes-table.component.html',
  styleUrls: ['./major-indexes-table.component.scss']
export class MajorIndexesTableComponent implements OnInit, OnDestroy {

  private subs = new Subscription();
  public dataArr: any;
  constructor(private financeAPI: FinancialStockService) {}

  ngOnInit(): void {
    .subscribe((res) => {
      this.dataArr = res.majorIndexesList;
      console.log('Data Array: ', this.dataArr);
    (err: HttpErrorResponse) => {

  ngOnDestroy(): void {
    if(this.subs) {


And the html and css at the beginning of this article for your CSS or SCSS and HTML files.