表格对齐问题～愁了几天了。。

想做一个类似excel的固定表头的效果，思路是在<tbody>的第一行前面插入一个新行，然后里面放个div，div设置overflow-y=scroll,然后把body的行填到div里面。这个可以实现了，但是发现div的滚动条出现之后，表头跟表身对不齐了！！特此前来求教坛子里的各位大大～～

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .table_container{border:2px solid #3578B4;width:885px;height:300px;margin:0 auto;}
        .table_container table{width:100%;border-collapse: collapse;}
        .table_container table tr td,.table_container table tr th {border:1px solid #D7ECFF;border-left:none;border-top:none;text-align:center;}
        .table_container table tr th {height:30px;line-height:30px;background:#EFF9FF;font-size:14px;}
        .table_container table tr td{height:30px;line-height:30px;color:#616161;font-size:15px;}
        .table_content{height:265px;overflow-y:auto;overflow-x:hidden;}
    </style>
</head>
<body>
    <div class="table_container">
        <table class="table_header">
                <col width="130px"></col>
                <col width="65px"></col>
                <col width="225px"></col>
                <col width="235px"></col>
                <col width="75px"></col>
                <col></col>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
                <th>身高</th>
                <th>体重</th>
            </tr>
        </table>
        <div class="table_content">
            <table>
                <col width="130px"></col>
                <col width="65px"></col>
                <col width="225px"></col>
                <col width="235px"></col>
                <col width="75px"></col>
                <col></col>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td>北京</td>
                        <td>175</td>
                        <td>70</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
利用col来定宽度，最后一个col不要设置宽度，这样出现滚动条的时候就不会变形了。要是宽度不定的话可以在每次表格加载完之后，把表内容第一行的td的宽度都取出来挨个给col加上。