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.

Possible duplicate of [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — Heretic Monkey, Apr 25 '17 at 16:24
Also, please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey, Apr 25 '17 at 16:25
@MikeMcCaughan -Its not duplicate ,in that post they are using jquery and i'm working on plain CSS. I worked to resolve and issue is when i added the horizontal scrollbar, fixed header is no more working. — user3684675, Apr 25 '17 at 16:27
It's impressive that you were able to go through all 22 answers to that question so quickly. Even this one: http://stackoverflow.com/a/25818428/215552, which uses HTML and CSS only... Perhaps you should [edit] your question to include how that answer didn't work for you? — Heretic Monkey, Apr 25 '17 at 16:31

score 0 · Answer 1 · answered Apr 25 '17 at 16:43

0

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.

answered Apr 25 '17 at 16:43

Esteban Echeverry

154
2
10

1

i cannot use any other plugin's as my project doesn't allows to do so. I need to fix it using html,css – user3684675 Apr 25 '17 at 17:06

fix the table header when horizontal and vertical scrollbar is available

1 Answers1