出现滚动条的表格对齐方法 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src= 'jquery.js'></script>
<script type="text/javascript">
    $(function(){
        table_align('.topT','.bottomT',6)
    })



function table_align(table1,table2,tdnums){
    for(var i=1;i<tdnums;i++){
        var tdclass = ".td_"+i;
        var thwidth=$(table1).find(tdclass).width();
        $(table2).find(tdclass).width(thwidth);        
    }
}
</script>
<style type="text/css">
    .topT{
        margin-bottom: 0px;
    }
    .bottom{
        height: 100px;
        overflow-y:auto; 
    }
</style>
</head>
<body>
    <div class='top'>
        <table class='table table-bordered topT'>
            <tr>
                <td class='td_1'>aaaaaaaaaa</td>
                <td class='td_2'>aaaaaaaaaa</td>
                <td class='td_3'>aaaaaaaaaa</td>
                <td class='td_4'>aaaaaaaaaa</td>
                <td class='td_5'>aaaaaaaaaa</td>
                <td class='td_6'>aaaaaaaaaa</td>
            </tr>
        </table>
    </div>
    <div class='bottom'>
        <table class='table table-bordered bottomT'>
            <tr>
                <td class='td_1'>aaaaaaaaaa</td>
                <td class='td_2'>aaaaaaaaaa</td>
                <td class='td_3'>aaaaaaaaaa</td>
                <td class='td_4'>aaaaaaaaaa</td>
                <td class='td_5'>aaaaaaaaaa</td>
                <td class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td  class='td_1'>aaaaaaaaaa</td>
                <td  class='td_2'>aaaaaaaaaa</td>
                <td  class='td_3'>aaaaaaaaaa</td>
                <td  class='td_4'>aaaaaaaaaa</td>
                <td  class='td_5'>aaaaaaaaaa</td>
                <td  class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td  class='td_1'>aaaaaaaaaa</td>
                <td  class='td_2'>aaaaaaaaaa</td>
                <td  class='td_3'>aaaaaaaaaa</td>
                <td  class='td_4'>aaaaaaaaaa</td>
                <td  class='td_5'>aaaaaaaaaa</td>
                <td  class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td  class='td_1'>aaaaaaaaaa</td>
                <td  class='td_2'>aaaaaaaaaa</td>
                <td  class='td_3'>aaaaaaaaaa</td>
                <td  class='td_4'>aaaaaaaaaa</td>
                <td  class='td_5'>aaaaaaaaaa</td>
                <td  class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
            </tr>
        </table>
    </div>
</body>
</html>

想法就是取得除了最后一个td之前的td宽度 ，然后赋予相对应的td

最后一个因为表格是用了bootstrap的自适应表格宽度 自适应，所以不用修改

 

 

 
posted @ 2015-05-26 09:13  小菜鸡12315  阅读(382)  评论(0)    收藏  举报