Fixed left column

Mobile friendly as well!

by BramVanroy

HTML

<div id="tables-wrapper">
    <div id="overflow-table">
        <table id="data-table">
            <thead>
                <tr>
                    <th>Maandag</th>
                    <th>Dinsdag</th>
                    <th>Woensdag</th>
                    <th>Donderdag</th>
                    <th>Vrijdag</th>
                </tr>
            </thead>
            <tr>
                <td>Vrije raadpleging
                    <br>8u30 tot 10u30</td>
                <td>Dr. Behets
                    <br>Dr. Vanroy</td>
                <td>Dr. Slenders</td>
                <td>Dr. Vanroy</td>
                <td>Dr. Behets</td>
                <td>Dr. Behets</td>
            </tr>
            <tr>
                <td>Ochtend
                    <br><strong>afspraak</strong>

                </td>
                <td></td>
                <td>Dr. Vanroy</td>
                <td></td>
                <td></td>
                <td>Dr. Slenders</td>
            </tr>
            <tr>
                <td>Namiddag en/of avond
                    <br><strong>afspraak</strong>

                </td>
                <td>Dr. Behets
                    <br>Dr. Slenders</td>
                <td>Dr. Behets
                    <br>Dr. Vanroy</td>
                <td>Dr. Behets
                    <br>Dr. Slenders</td>
                <td>Dr. Behets
                    <br>Dr. Slenders
                    <br>Dr. Vanroy</td>
                <td>Dr. Slenders
                    <br>Dr. Vanroy</td>
            </tr>
            <tr>
                <td>Vrije raadpleging
                    <br>van 17u30 to 19u</td>
                <td>Dr. Vanroy</td>
                <td>Dr. Behets</td>
                <td>Dr. Slenders</td>
                <td>Dr. Vanroy</td>
                <td>Dr. Slenders</td>
            </tr>
        </table>
    </div>
</div>

CSS

#tables-wrapper {
    width: 90%;
    margin: 12px auto;
    position: relative;
    font-size: 14px;
    font-family: sans-serif;
}
#overflow-table {
    overflow-x: auto;
}
#overflow-table.overflow {border-right: 1px solid #C3E8EF;}
#cloned {
    position: absolute;
    left: 0;
    top: 0;
}
#data-table {
    width: 100%;
    min-width: 480px;
}
td, th {
    border: 1px solid #C3E8EF;
    padding: 2px 5px;
}
th {
    font-weight: 700;
    background: #C3E8EF;
}

JavaScript

// Create new table
$('<table id="cloned"><tbody></tbody></table>').appendTo("body").hide();

// Append first column of first table to our new table
$("#data-table tbody tr").each(function () {
    var $this = $(this);
    $("<tr></tr>").append($this.children("td:first-child")).appendTo("#cloned > tbody");
});

// Prepend new table to our table wrapper
$("#cloned").prependTo("#tables-wrapper").show();

// Make sure the height of the new rows is the same as the old ones
$("#data-table > tbody > tr").each(function (index) {
    var $this = $(this),
        thisH = $this.outerHeight(),
        cellH = $("#cloned > tbody > tr").eq(index).outerHeight();
    if (cellH > thisH) {
        $this.css("height", cellH);
    } else {
        $("#cloned > tbody > tr").eq(index).css("height", thisH);
    }
});

// Position tables in relation to each other
(function () {
    var w = $("#cloned > tbody td").outerWidth();
    $("#overflow-table").css("marginLeft", w);
    var h = $("#data-table > thead").outerHeight();
    $("#cloned").css("top", h);
})();

// Detect overflow
$(window).resize(function() {
    var tabelW = $("#data-table").outerWidth(),
        wrapperW = $("#overflow-table").outerWidth();
    
    if (tabelW >= wrapperW) {
        $("#overflow-table").addClass("overflow");
    } else {
        $("#overflow-table").removeClass("overflow");
    }    
}).resize();