Sticky header

by Bianca Kuehweidner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.2/js/jquery.tablesorter.combined.min.js"></script>
<div id="report_ticketing">

    <div class="reporting-content-overflow" style="overflow: auto; max-height: 136px;">

            <table id="report_ticketing-table" style="width: auto;">
                <thead>
                    <tr>
                        <th>Vorgang</th>
                        <th>Bu.-Datum</th>
                        <th>Kalk.-Datum</th>
                        <th>Programm</th>
                        <th>Office ID</th>
                        <th>Filekey</th>                                             
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>504453</td>
                        <td>15.01.2015</td>
                        <td>15.01.2015</td>
                        <td>EUR1507ANA</td>
                        <td>HAML628AA</td>
                        <td>XZRT5K</td>                                   
                    </tr>
                    <tr>
                        <td>394453</td>
                        <td>10.02.2015</td>
                        <td>10.04.2015</td>
                        <td>BER1605AN</td>
                        <td>HOL998AA</td>
                        <td>YRRT3K</td>                                   
                    </tr>
                    <tr>
                        <td>123456</td>
                        <td>01.12.2014</td>
                        <td>01.12.2014</td>
                        <td>BRE1516AN</td>
                        <td>HAML1219V</td>
                        <td>4XA2RE</td>                                             
                    </tr>                    
                    <tr>
                        <td>352352</td>
                        <td>01.05.2014</td>
                        <td>01.07.2014</td>
                        <td>BRE1615AN</td>
             ...

CSS

table  { border-collapse: collapse; }
th, td { border: solid 1px #ccc; }
#report_ticketing { display: none; }

JavaScript

var param = "ticketing";

$("#report_" + param + "-table").tablesorter({
    cssChildRow: 'expand-child',
    widgets: ['stickyHeaders'],
    widgetOptions: {
    stickyHeaders_attachTo: $('#report_' + param + ' .reporting-content-overflow')
  }
});


$("#showTable").click(function() {
	$("#report_" + param).show();
});