fix thead of a table with tbody defined in javascript

Question

I have a table inside of a popup, I want to fix the header and scroll on the table, any suggestions please

<div id="popupInfo" class="modal hide fade" style="width:30%;left:33%;">
    <div class="modal-body">
        <div style="padding-left:10px">
            <table id="tableInfo" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <td>.....</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

in css

.modal-body {
    position: relative;
    max-height: 400px;
    padding: 15px;
    overflow-y: auto;
}

in js we define tbbody as follow:

$('#info').click(function (e) {
    ..... (definition of variables..)
    $("#popupInfo").modal();
    buff += '<tr>';
    buff += '<td>'++value.description + '</a>' + '</td>';
    buff +=...
});

$('#tableInfo > tbody:first').append(buff); 
    // Here is missing some code.
    error: function(jqXHR, textStatus, errorThrown) {
        // Une erreur s'est produite lors de la requete
        console.log(errorThrown);
    }
});