Sticky Table Header Example

by Adi Jaya

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <h2>Heading</h2>
    <p>Lorem Ipsum...</p>
    
    <div class="table-sticky">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Head</th>
                    <th>Head</th>
                    <th>Head</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
            </tbody>
        </table>
    </div>


    <h2>Heading</h2>
    <p>Lorem Ipsum...</p>
    <div class="table-sticky">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Head</th>
                    <th>Head</th>
                    <th>Head</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>3</td>
 ...

CSS

.table-sticky {
    overflow: auto;
    max-height: 300px;
}

.table-sticky thead th {
    position: sticky;
    top: -1px;
    background: white;
}

.table-sticky .table-bordered thead th {
    background: blue;
    color: white;
}