Table prototyping

Failed to achieve a non-js dual scrollable table with a fixed table header.

by Vico Bertogli III

HTML

<div id="container">
    <div class="allowScroll">
        <table>
            <thead>
                <tr>
                    <th>icon
                        <div>icon</div>
                    </th>
                    <th>Name
                        <div>Name</div>
                    </th>
                    <th>Status
                        <div>Status</div>
                    </th>
                    <th>Assignee
                        <div>Assignee</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>icons</td>
                    <td>Names</td>
                    <td>Statuses</td>
                    <td>Assignees</td>
                </tr>
                <tr>
                    <td>icons</td>
                    <td>Names</td>
                    <td>Statuses</td>
                    <td>Assignees</td>
                </tr>
                <tr>
                    <td>icons</td>
                    <td>LONG ASS NAME TO TEST STUFF</td>
                    <td>Statuses</td>
                    <td>Assignees</td>
                </tr>
                <tr>
                    <td>icons</td>
                    <td>Names</td>
                    <td>Statuses</td>
                    <td>Assignees</td>
                </tr>
                <tr>
                    <td>icons</td>
                    <td>Names</td>
                    <td>Statuses</td>
                    <td>Assignees</td>
                </tr>
                <tr>
                    <td>icons</td>
                    <td>Names</td>
                    <td>Statuses</td>
                    <td>Assignees</td>
                </tr>
                <tr>
                    <td>icons</td>
                    <td>Names</td>
                    <td>Statuses</td>
                    <td>Assignees</td>
                </tr>
                <tr>
                    <td>icons</td>
                   ...

CSS

div#container {
    width: 200px;
    height: 150px;
    border: 5px #000 solid;
    margin: 20px auto;
    overflow-y:scroll;

}
div.allowScroll {
    position:relative;
    overflow-y:hidden;
    overflow-x:scroll;
}
table {
    border-spacing: 0;
    height:auto;
    width:auto;
}
td {
    white-space: nowrap;
}
thead th {
    color:transparent;
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    white-space: nowrap;
}
thead div {
    position:absolute;
    color:#fff;
    background:#000;
    width:100%;
    box-sizing:border-box;
    top:0px;
    line-height:normal;
}
tbody {
    overflow-y:scroll;
}