JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<form class="form1" action="" method="get" name="filter">

<div class="table-wrp">
<table id="header-table"><thead><tr></tr></thead></table>
<table class="table1" cellspacing="0" cellpadding="0">
<thead>
<tr class="header">
	<th>Vessel</th>
	<th>Week</th>
	<th>FROM</th>
	<th>UNTIL</th>
	<th>DESTINATION</th>
	<th>Available places</th>
	<th>Options</th>
	<th>Price</th>
	<th>Marina start</th>
	<th>Marina finish</th>
	<th>Comments</th>
</tr>
</thead>
<tbody>
	<tr>
		<td><p align="center">test12</p></td>
		<td><p align="center">1</p></td>
		<td><p align="center">12.12.2016</p></td>
		<td><p align="center">22.12.2016</p></td>
		<td><p>test DESTINATION</p></td>
		<td><p align="right">5</p></td>
		<td><p>22</p></td>
		<td><p><font color="#ff0000">800</font></p></td>
		<td><p>Marsa Ghaleb</p></td>
		<td><p>Marsa Ghaleb</p></td>
		<td><p>Departure guaranteed</p></td>
	</tr>
</tbody>
</table>
</div>
</form>

CSS

.table-wrp{
            position: relative;
        }
        #header-table {
            display: block;
            position: absolute;
            top: 0;
            overflow: hidden;
            z-index: 1;
            background-color: #fff;
            border-collapse: collapse;
        }
        #header-table.fixed{
            position: fixed;
        }
        .form1 *{
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header-table td {
            display: table-cell;
            vertical-align: middle;
            padding: 5px;
            border: 1px solid #000;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
        }
        .table1{
            border-collapse: collapse;
        }
        .table1 thead{
            visibility: hidden;
        }
        .table1 td,.table1 th{
            border: 1px solid #000;
            padding: 5px;
        }
        .table1 th{
            font-size: 14px;
            font-weight: 700;
        }
        .filter{
            margin-bottom: 10px;
        }

JavaScript

$(function(){
        var $table = $('.table1'),
        $headerInner = $('#header-table thead tr'),
        $header = $('#header-table'),
        $thead = $('.table1 thead'),
        $tableHeight = $('.table1').height();
        $thead.find('th').each(function(){
            var $newdiv = $('<td />').width($(this).outerWidth());
            $newdiv.text($(this).text());
            $headerInner.append($newdiv);
        });
        $(window).scroll(function() {
            var posTable = $table.offset().top,
                posWin = $(window).scrollTop(),
                headerHeight = $header.height();
            if(posWin >= posTable  && posWin < ($tableHeight + posTable - headerHeight) ){
                $header.addClass('fixed');
            }
            else{
                $header.removeClass('fixed');
            }
        });
        $(window).scroll();
    });