实现表格标题和内容列对齐的内嵌滚动方法

最近有个活，需要做一个内嵌表格，第一行为标题，其余为数据行，现在就是要在保证标题列和数据列对齐的情况下，实现数据内容的内嵌滚动。

这里简单介绍两种方法，第一种最为简单，但是有一点瑕疵；第二种办法稍微复杂一点，但可以避免前面方法的问题，但同样有一点小问题，我们可以根据我们的具体应用来进行选择：

从网上搜了一下，发现一种思路，也是比较简单的一种方式：

<div style="overflow:auto;" mce_style="overflow:auto;">
    <table border="1px" cellpadding="0px" cellspacing="0px">
        <tr style=" position:relative; top:expression(this.offsetParent.scrollTop);">
            <td style="width:100px">标题1</td>
            <td style="width:200px">标题2</td>
            <td style="width:300px">标题3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
</table>
</div>

其原理就是利用position:relative;
来将标题行悬浮在页面上，从而达到固定标题行的目的，但是在实际测试过程中，我们发现在一些浏览器中（IE的不同版本），有一些可以正常显示，但有一些在拉动滚动条的时候，标题行会发生轻微抖动，感觉很是不好，于是我们就想到下面一个解决这个问题的办法：

<table id="table1" border="1px" cellpadding="0px" cellspacing="0px" style="width:95%">
        <tr>
            <td style="width:100px">标题1</td>
            <td style="width:200px">标题2</td>
            <td style="width:300px">标题3</td>
        </tr>
    </table>
    <div style="width:100%; height:90px; overflow:auto;">
        <table id="table2" border="1px" cellpadding="0px" cellspacing="0px" style="width:95%">
            <tr>
                <td style="width:100px">内容1</td>
                <td style="width:200px">内容2</td>
                <td style="width:300px">内容3</td>
            </tr>
        </table>
    </div>

当然，还需要一行默认执行的脚本：

document.all(“table2”).style.widh = docment.all(“table1”).clientWidth;

其工作原理就是，通过先展现列表，然后再通过脚本来最后调整一下，因为在普通屏中一般是不需要调整的，但在一些宽屏上可能会出现一点点偏差，这时就需要脚本进行最后的一点调整工作。