带表头的可滑动数据区的table

网上有很多的实现方法，我比较喜欢使用thead和tbody的方法，但是我发现thead的内容会与tbody的内容重叠，请各位大侠帮我改一下。<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height:160px; width:346px; overflow-y:scroll">
        <table style="width:323px" cellpadding="0" cellspacing="0">
            <thead>
                <tr style="position: absolute;left:1px;top:1px">
                    <td>时间</td>
                    <td>号码</td>
                    <td>数字</td>
                </tr>
            </thead>
            <tbody id="aaa" style="height:20px;overflow-y:scroll">
            </tbody>
        </table>
    </div>
    <div style="text-align:center">
            <input type="button" value="增加" onclick="AddNewRow();"/>
        </div>
    </form>
</body>
<script type="text/javascript">
    function AddNewRow() {
        var b = document.getElementById("aaa");
        var row = b.insertRow(0);
        var c1 = row.insertCell(0);
        var c2 = row.insertCell(1);
        var c3 = row.insertCell(2);        c1.innerHTML = "9:01:02";
        c2.innerHTML = "A12345";
        c3.innerHTML = "584";
    }
</script>