ブートストラップとスクロール可能なコンテンツを使用してテーブルのヘッダーを修正する

Question

Bootstrapを使用して固定ヘッダーとスクロール可能なコンテンツでテーブルを作成しようとしています。多くの例がありますが、列の配置が欠落しているか、コンテンツ自体がスクロールするスクロールバーを取得していません。

出典：下記の例をbootstrap code to fix table headerから取得しましたが、それに続く解決策はありません。

例リンク固定する：https://plnkr.co/edit/5285K3dt5aErj3ZgrzIl?p=preview

HTMLコード：

<div class="modal-body"> 
     <div class="row"> 
      <div class="" style="width: 80%; margin: 0px auto"> 
       <table class="table table-bordered header-fixed" style="border :1px"> 
        <thead> 
        <tr style="background-color: #cdd0d6;"> 
         <th style="white-space: wrap;text-align: center;">ID</th> 
         <th style="white-space: nowrap;text-align: center;">Description</th>    
         <th style="white-space: wrap;text-align: center;">DoorNum</th> 
         <th style="white-space: wrap;text-align: center;">First Name</th> 
         <th style="white-space: wrap;text-align: center;">Num of ordered items</th> 
         <th style="white-space: wrap;text-align: center;">Desc Comments</th> 
        </tr> 
        </thead> 
        <tbody > 
        <tr> 
         <td style="text-align: center;">10</td> 
         <td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td> 
         <td style="text-align: center; ">798</td> 
         <td style="text-align: center; ">Joe</td> 
         <td style="text-align: center; ">4</td> 
         <td style="text-align: center; ">Order dispatched</td> 
        </tr> 
.... 
</div> 

PS：私は多くのリンクをたどっし、実装しようとしたが、まだ解決策を持っていないしています。

Answer 1

単に

thead { 
    position: fixed; 
}