make the table content scrollable with fixed table header if the data is more and show the links as the vertical menu

I am working on frontend application.
Demo : http://plnkr.co/edit/QhZj7WCIvjbgMRJFZGh3?p=preview

I have a list of menu items(Vertical Menu) when clicked on the links content is shown. I want the list of menu items to be shown as the vertical menu(right now only the names are displayed as shown in plnkr demo). When user selects the menu the selected item should be highlighted. I tried using some of CSS code but could not got the expected output. Any inputs would be helpful. Second one is i want the html table with the vertical scrollbar so that if the data is more scrollbar is shown.

PS:Want to make the links(ShowOSpackage1, ShowOSpackage2..)as the left side navigation menu with the selected item highlighted.Any inputs using css/bootstrap? Second issue is i want the scrollable table if the records in the table are more than it fits in the page(table is displayed when user clicks on first option ShowOSPackage1).For this scenario i have used the below code while declaring the table but it is not showing the scrollbar:

sample code:

<div ng-controller="MainCtrl">
    <div class="row">
    <div class="col-sm-3">
    <div class="sidebar-wrap">
    <div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="nav navbar-nav">


    <li>     <a ng-click="toggle='ShowOsPackage1'" ng-class="{ 'active' : toggle === 'ShowOsPackage1' }">

    showOsPackage1

    </a></li>
<li>     <a ng-click="toggle='ShowOsPackage2'" ng-class="{ 'active' : toggle === 'ShowOsPackage2' }">

    showOsPackage2

    </a></li>
<li>     <a ng-click="toggle='ShowOsPackage3'" ng-class="{ 'active' : toggle === 'ShowOsPackage3' }">

    showOsPackage3

    </a></li>

    </ul>
    </div>
    </div>
    </div>
    </div>
    <div class="" ng-show="toggle === 'ShowOsPackage3'"><h1>ShowOsPackage3</h1> </div>
            <div class="" ng-show="toggle === 'ShowOsPackage2'"><h1>ShowOsPackage2</h1> </div>
<div class="" ng-show="toggle === 'ShowOsPackage1'">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div>
<h2 style="text-align: center;">Table shown here</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-1"> </div>
<div class="col-xs-8" style="width:80%;background: none;height: 660px;">
<table class="table table-scroll table-striped">
    <thead>
    <tr style="background-color: #cdd0d6;">
    <th style="width:25%;white-space: nowrap;text-align: center;">Header1</th>
    <th style="width:10%;white-space: nowrap;text-align: center;">Header1</th>
    <th style="width:10%;white-space: nowrap;text-align: center;">Header3 </th>
         </tr>
    </thead>
    <tbody style="width:95%">
    <tr>
    <td style="width:25%;text-align: center;">
        HEADER1 CONTENT
    <td style="width:10%;text-align: center; ">
        header2 content
    </td>

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/02/make-the-table-content-scrollable-with-fixed-table-header-if-the-data-is-more-and-show-the-links-as-the-vertical-menu/
via @lzomedia #developer #freelance #web #lzomedia.com