Table prototyping #2

Attempting this WITH javascript assistance.

by Vico Bertogli III

HTML

<div id="container">
    <header> <span>Name</span>

<i class="divider"></i>
 <span>Job</span>

<i class="divider"></i>
 <span>Assignee</span>

    </header>
    <div>
        <table>
            <colgroup>
                <col span="1" width="10px" />
                <col span="1" width="150px" />
                <col span="1" width="300px" />
            </colgroup>
            <tbody>
                <tr>
                    <td>JOB NAME HERE</td>
                    <td>Short job</td>
                    <td>Vico Bertogli III</td>
                </tr>
                <tr>
                    <td>Short name</td>
                    <td>Longest job name!!!!!!!!</td>
                    <td>Michael Sucena</td>
                </tr>
                <tr>
                    <td>VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY LONG NAME</td>
                    <td>Job</td>
                    <td>Dr Miehling</td>
                </tr>
                <tr>
                    <td>JOB NAME HERE</td>
                    <td>Short job</td>
                    <td>Vico Bertogli III</td>
                </tr>
                <tr>
                    <td>Short name</td>
                    <td>Longest job name!!!!!!!!</td>
                    <td>Michael Sucena</td>
                </tr>
                <tr>
                    <td>VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY LONG NAME</td>
                    <td>Job</td>
                    <td>Dr Miehling</td>
                </tr>
                <tr>
                    <td>JOB NAME HERE</td>
                    <td>Short job</td>
                    <td>Vico Bertogli III</td>
                </tr>
                <tr>
                    <td>Short name</td>
                    <td>Longest job name!!!!!!!!</td>
                    <td>Michael Sucena</td>
                </tr>
                <tr>
                    <td>VERY VERY VERY VERY VERY LONG NAME</td>
...

CSS

div#container {
    width:300px;
    height:300px;
    margin:25px auto;
    overflow-y:hidden;
    overflow-x:scroll;
    position:relative;
    border:5px #000 solid;
}
header {
    position:absolute;
    min-width:100%;
    height:auto;
    width:auto;
    background:#fff;
    font-weight:bold;
    white-space: nowrap;
    font-size:0;
}
header > span {
    text-align:center;
    font-size:16px;
    display:inline-block;
    vertical-align:top;
}
header > .divider {
    display:inline-block;
    width:0px;
    height:100%;
    border-left:1px #000 solid;
    cursor: col-resize;
}
div#container > div {
    overflow-x:hidden;
    overflow-y:scroll;
    display:inline-block;
    width:auto;
    height:100%;
}
table {
    table-layout: auto;
    border-collapse: fixed;
    border-spacing: 0;
}
tr, header {
    border-bottom:1px #000 solid;
}
td {
    border-left:1px #000 solid;
}
tr > td:first-child {
    border:none;
}
td, header > span {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing:border-box;
    padding:5px;
}

JavaScript

/* 
function resizeColumns(n) {
    if (n === undefined) {
        throw new Error("Please define which column to resize");
    }

    // n should represent the position of the column within an array of all columns.  So ['name', 'job', 'assignee'] for instance if I were to target the job column, n would have to be passed in as 1


    var header = $('#container').find(' > header');
    var table = $('#container').find('table');

    var newWidth = header.find('span:nth(' + n + ')').width();

    alert(newWidth);
}
*/

function assignSizeToHeader() {
    // Run once for init / reload

    var header = $('#container').find(' > header');
    var table = $('#container').find('table');
    var firstRow = table.find('tr:first');

    header.width(table.width());
    header.height(header.height());

    header.find('> span').each(function (item) {
        var $this = firstRow.find('td:nth(' + item + ')');
        header.find('span:nth(' + item + ')').width($this.width());
    });

    table.css('margin-top', header.height());
}

assignSizeToHeader();