TBS affix with table header

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<h3>Table</h3>
<div style="overflow:scroll;width:200px">


<TABLE>
    <THEAD id="theHeader" class="">
        <TR>
            <th width="15%">...</th>
            <th width="60%">header information</th>
            <th width="25%">...</th>
        </TR>
    </THEAD>
    <TFOOT>
        <TR>
            <td>...</td>
            <td>footer information</td>
            <td>...</td>
        </TR>
    </TFOOT>
    <TBODY>
        <TR>
            <td>...</td>
            <td>first row of block one data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>second row of block one data</td>
            <td>...</td>
        </TR>
    </TBODY>
    <TBODY>
        <TR>
            <td>...</td>
            <td>first row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>second row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>third row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>fourth row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>fifth row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>sixth row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>seventh row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>eighth row of block two data</td>
            <td>...</td>
        </TR>
        <TR>
            <td>...</td>
            <td>ninth row of block two data</td>
           ...

CSS

table {
    border-collapse: collapse;
    font-size: 1.5em;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    
}

th, td {
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: rgba(180, 200, 255, 0.25);
}

.affix {
    position: fixed;
    
    width: auto;
    display: table;
    top:0px;
}

.affix-placeholder {
  /* Doesn't take up space in the content flow initially. */
  display: none;
}

.affix + .affix-placeholder {
  /* Once we affix the submenu, it *does* take up space in the content flow. But keep it invisible. */
  display: table-row-group;
  visibility: hidden;
}

JavaScript

var $affixed = $("#theHeader");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $affixed.clone().addClass("affix-placeholder");
$affixed.after($placeholder);

$affixed.affix({
    offset: {
        top: 55
    }
})