Html 如果数据较多，则使用固定的表格标题使表格内容可滚动，并将链接显示为垂直菜单

我正在开发前端应用程序。 演示：

我有一个菜单项列表（垂直菜单），当点击链接内容显示。我希望菜单项列表显示为垂直菜单（现在只有名称显示为plnkr演示中所示）。当用户选择菜单时，所选项目应高亮显示。我尝试使用一些CSS代码，但未能获得预期的输出。任何投入都会有帮助。第二个是我想要一个带有垂直滚动条的html表，这样如果数据是更多的，就会显示更多的滚动条

PS:

要将链接（showoPackage1、showoPackage2..）作为左侧导航菜单，并突出显示所选项目

。是否使用css/bootstrap进行任何输入？第二个问题是，如果表中的记录超出了页面的范围，我需要可滚动的表（当用户单击第一个选项ShowsPackage1时显示表）。在这种情况下，我在声明表时使用了以下代码，但它没有显示滚动条：

示例代码：

<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>

展示包装1


展示包装2


展示包装3


展示包装3
展示包装2
此处显示的表格
校长1
校长1
校长3
标题1内容
标题2内容