Получить полосу прокрутки ниже области заголовка в таблице. Примечание: таблица не имеет thead и tbody

Мне нужно показать пользователю столбец заголовка все время, поэтому, если мы разместим заголовок под заголовком, тогда при прокрутке вниз заголовок останется постоянным. я поднимаю полосу прокрутки, но не могу привести ее ниже области заголовка.

JsFiddle: http://jsfiddle.net/99wjn/23/

Javascript:

function load_table() { 
    var cmpLayoutDiv = document.getElementById("tLayout");
    cmpLayoutDiv.innerHTML = "";
    var colHeaderList = ['Name', 'RollNo', 'I', 'II','III', 'IV', 'V','VI', 'VII','VII', 'VIII', 'IX']
    var tableDef = "<table style='border: 1px solid #000000; border-radius: 0; margin: 12px; padding: 0; width: 350px; height:300px; box-shadow: 0; overflow : auto; display: block;'>";
tableDef += "<tr style='border: inherit; background-color:yellow;' id='tableColumns'>";
    for (var i = 0; i < 2; i++) {
        var j = 0;
        if (i == 1) {
            j = 2;
        }
        for (; j < colHeaderList.length; j++) {
            tableDef += "<td>" + colHeaderList[j] + "</td>";
        }
    }
    tableDef += "</tr>";
    for (var i = 0; i < 55 ; i++) {
        tableDef += "<tr>";
        tableDef += "<td>"+ i +"</td>";
        tableDef += "<td>"+ i +"</td>";
        for (var j = 2; j < 12; j++) {
            tableDef += "<td>" + j + "</td>";
        }
        for (var j = 2; j < 12; j++) {
            tableDef += "<td>" + j + "</td>";
        }
        tableDef += "</tr>";
    }
    tableDef += "</table>"
    cmpLayoutDiv.innerHTML = tableDef;

}

HTML:

<button type="button" onclick="load_table();" > click </button>

<div id="tContainer" class="tContainer">
     <div id="tLayout"></div>
</div>

CSS:

.tContainer {
    background: none repeat scroll 0 0 #FFFFFF;
    border: thin solid;
    margin-left: 9px;
}

Пожалуйста, помогите мне решить проблему.