首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

表格对齐有关问题~愁了几天了。

2013-04-21 
表格对齐问题~愁了几天了。。想做一个类似excel的固定表头的效果,思路是在tbody的第一行前面插入一个新行,

表格对齐问题~愁了几天了。。
想做一个类似excel的固定表头的效果,思路是在<tbody>的第一行前面插入一个新行,然后里面放个div,div设置overflow-y=scroll,然后把body的行填到div里面。这个可以实现了,但是发现div的滚动条出现之后,表头跟表身对不齐了!!表格对齐有关问题~愁了几天了。

特此前来求教坛子里的各位大大~~
[解决办法]


<!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加上。

热点排行