<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    body{
        100%;
        height:100%;
        position:fixed;
        margin:0;
        padding:0;
    }
    #content{
        1000px;
        height:150px;
        margin:0 auto;
        border:1px solid #ddd;
        margin-top:20px;
        overflow:auto;
        position:relative
    }
    #content>table,#content .table-fixed table{
        700px;
        border-collapse:collapse;
        table-layout:fixed;
    }
    .table-fixed table th,.table-fixed table th{
        text-align:center;
        border:1px solid #ddd;
    }
    #content>table th{
        100px;
    }
    #content>table th,#content>table td{
        text-align:center;
        border:1px solid #ddd;
    }
</style>
</head>
<body>
<div id="content">
    <table class="otbl">
        <thead>
            <tr>
                <th>固定列</th>
                <th>固定列</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
            </tr>        
        </thead>
        <tbody>
            <tr>
                <td>固定列</td>
                <td>固定列</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>固定列</td>
                <td>固定列</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>       
            <tr>
                <td>固定列</td>
                <td>固定列</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>  
                        <tr>
                <td>固定列</td>
                <td>固定列</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>  
                        <tr>
                <td>固定列</td>
                <td>固定列</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>  
            <tr>
                <td>固定列</td>
                <td>固定列</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr> 
            <tr>
                <td>固定列</td>
                <td>固定列</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr> 
        </tbody>
    </table>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
    //固定表头
    $("#content").css("position","relative");
    $("#content").on('scroll',function(){
        var el=$(this).find(".table-fixed");
        //判断是否有el
        if(!el[0]){
            $(this).append("<div class='table-fixed' style='position:absolute;top:0'><table style='table-layout:fixed'></table></div>");
            var otbl=$(this).find(".otbl thead tr").children();
            //创建，找到表格的第一行进行克隆
            var $thead=$(this).find(".otbl thead").clone();
            $thead.find("tr").children().each(function(idx,ele){
                $(ele).each(function(i,e){
                    $(e).css("width",otbl.eq(idx).css("width"));
                    $(e).css("height",otbl.eq(idx).css("height"));
                })
            })
            $(this).find('.table-fixed table').append($thead);
        }else{
            //就设置top值
            el.css("top",$(this)[0].scrollTop+"px")
        }
    })
})
</script>
</body>
</html>