Table header to be fixed using bootstrap and scrollable content

Question

I am trying to create a table with fixed header and scrollable content using Bootstrap.I have gone through many examples but none of them seems to be perfectly working with my code. Either the column alignment is missing or the content itself is not getting a scrollbar to scroll.

Source : I have taken the below example from bootstrap code to fix table header , but it doesn't have any solutions to follow.

Example link to be fixed : https://plnkr.co/edit/5285K3dt5aErj3ZgrzIl?p=preview

HTML code:

    <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: I have followed many links and tried to implement, but have not got the solution yet.

Answer 1

Simply

thead {
    position: fixed; 
}