js完成table表格的表头和侧边固定

<link rel="stylesheet" type="text/css" href="/2018ui/assets/css/linearicons.css">
<link rel="stylesheet" type="text/css" href="/2018ui/assets/css/simple-line-icons.css">
<link rel="stylesheet" type="text/css" href="/2018ui/assets/css/ionicons.css">
<link rel="stylesheet" type="text/css" href="/2018ui/assets/css/component.css">
<link rel="stylesheet" type="text/css" href="/2018ui/assets/css/jquery.mCustomScrollbar.css">
<link rel="stylesheet" type="text/css" href="/2018ui/assets/css/pagination.css">
<!-- 新框架css结束 -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<div class="main-body">
    <div class="page-wrapper">
        <div class="page-body">

            <div class="row" style="margin-top: 20px;">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>表头和侧边固定</h4>
                        </div>
                        <div class="card-block">
                            <div class="">
                                <div class="biotou" style="float: left;width: 100px;">
                                    <span class="spans">555</span>
                                    <div class="" id="fiedtd" style="height: 230px;overflow: hidden">
                                        <table class="table table-bordered" style="width: 100%;;">
                                            <tbody>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 99px;">56656</td>
                                                </tr>

                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                                <div class="biaowei" style="width:94%;float: left;">
                                    <div class="tableTop" id="tableTop" style="width: 100%; overflow-x: hidden;">
                                        <table class="table table-bordered m-b-0" style="width:100%;">
                                            <thead>
                                                <tr>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">总任务量</th>
                                                    <th style="width:100px">已完成任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                    <th style="width:100px">已解决任务量</th>
                                                </tr>

                                            </thead>
                                        </table>
                                    </div>
                                    <div class="tableBottom" id="tableBottom"
                                        style="overflow: auto;max-height: 250px;" onscroll="tableScroll(this)">
                                        <table class="table table-bordered" style="width:100%;" id="langTable">
                                            <tbody>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>
                                                <tr>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                    <td style="width:100px">sdasdas</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>