Sticky Table Header

Sticky Table Header using css only. - - or - Fixed Table Header using css only.

by jacobwsmith

HTML

<link href="https://adcatalyst.vizu.com/assets/lib/normalize.css/normalize.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_type.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_helpers.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_grid.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_forms.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_buttons.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_tables.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_summary.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_icons.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_panels.css" rel="stylesheet">
<link href="https://adcatalyst.vizu.com/assets/css/_tabs.css" rel="stylesheet">
<style>
       .table.table thead tr th{
           min-width:100px;
       }
    
    /* Extra - for demo purposes */
    .container {
        width: auto !important;
        min-width: 0;
        max-width: auto;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-12">
            
            <h1>Fixed Table Example</h1>

            <section class="group box">
                <div class="group-row table-fixed-horizontal">
                    <table class="table table-index table-fixed-header">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Age</th>
                                <th>Start date</th>
                                <th>Salary</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                    ...

CSS

.table-fixed-horizontal {
    overflow: scroll;
}
.table-fixed-header tbody td {
    overflow: hidden;
}

JavaScript

/* NONE */

/*
(function(){
    $( ".table-fixed-header" ).each(function() {
        var tableWidth = $(this).innerWidth(),
            rowWidth = $(this).find('tbody tr:first-child').innerWidth(),
            adjustWidth = tableWidth - rowWidth,
            $obj = $(this).find('thead tr th:last-child'),
            width = $obj.innerWidth() + adjustWidth + 'px';
        $obj.css({
            'width': width,
            'min-width': width,
            'max-width': width
        });
    });
}())
*/