JSFiddle - React, Tailwind, and code Playground

by Ratan Paul

HTML

<script src="http://rommelsantor.com/jquery/thfloat/jquery.thfloat-0.7.2.min.js"></script>
<div id="topsection">Fixed header section</div>
<br />
<div id="table-container">
    <table id="maintable">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
                <th>Col 6</th>
                <th>Col 7</th>
                <th>Col 8</th>
                <th>Col 9</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>This is a long column</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>This is a much longer column with lots of information</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
           ...

CSS

body {
    margin: 0px;
    background-color: white;
}
table {
    border-spacing: 0px;
}
thead tr {
    background-color: #c0c0c0;
    border: 1px solid black;
}
thead th {
    border: 1px solid black;
    padding-left: 5px;
    padding-right: 5px;
}
tr {
    background-color: #fff;
    border: 1px solid black;
}
table tr:nth-child(even) {
    background-color: #eeeeee;
}
td {
    border: 1px solid black;
    font-family: Arial;
    font-size: 10pt;
    word-wrap: break-word;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
}
tfoot tr {
    background-color: #c0c0c0;
}
#topsection {
    background-color: white;
    position: absolute;
    top: 0;
    margin: 0px;
    height: 130px;
    width: 100%;
    padding: 0px;
}
#table-container {
    background-color: white;
    position: absolute;
    top: 130px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    width: 100%;
}

JavaScript

$("#maintable").thfloat({
  attachment : "#table-container",
  noprint : false
});