fix the table header when horizontal and vertical scrollbar is available

Question

I want to make the html table headers fixed. I have many columns in the table, so vertical scrollbar is required to scroll and view the columns data.I want to fix the table header so that when user scroll down to view the rows, header is fixed. Please find the demo http://jsfiddle.net/ZcLSE/1425/. When user scroll down the table header should be fixed and visible to the users.Please advice.

css code:

.modal-body {
overflow-y: auto;
}
tbody {
}
thead, tbody tr {
}
thead {
    width: calc( 100% - 1em )
}
table {border-collapse:collapse; height:300px;overflow: auto;
    display: block;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

html code:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table class="table" border="1">
        <thead>
            <tr>
                <td>Namffffffffffffffffffffffffe</td>
                <td>phone</td>
                <td>Address</td>
                <td>Street</td>
                <td>City</td>
                <td>Pin</td>
                <td>Comments</td>
                 <td>info</td>
                   <td>Amount</td>
                <td>percentage</td>
                 <td>total</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
             <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>

                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                                  <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                                  <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
        </tbody>
    </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

PS: Both vertical and horizontal scrollbar is required, header of the table should be fixed.

Answer 1

I have tried solving the fiddle and I believe I have encountered the same problem as you, the thead becomes bigger than the container.

I will recommend this JQuery Plugin wich is made specially for your need.