jq 表单头部固定，内容滚动

<style>

.check_list {

            position: absolute;

            right: 5%;

            top: 17%;

            width: 25%;

            height: 40%;

 }

 .check_list tr {

            height: 26px;

            line-height: 26px;

  }

  .check_list td {

            padding-top: 20px;

            color: white;

            text-align: center;

            font-size: 12px;

    }

/*列表文字过多省略隐藏*/

        .check_list span{

            display: inline-block;

            width: 4rem;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }

        .check_tr{

            height: 90%;

            overflow: hidden;

        }

        .header {

            color: #00F9FF;

            font-size: 14px;

            line-height: 1.5rem;

            text-align: center;

        }

        .data-content{

            height: 87%;

            overflow: hidden;

        }

</style>

<div class="check_list">

            <h3 style="text-align: center">表头</h3>

            <div class="check_tr">

                <div class="header layui-row">

                    <div class="layui-col-md2">

                        <span>文件路径</span>

                    </div>

                    <div class="layui-col-md2">

                        <span>文件名称</span>

                    </div>

                    <div class="layui-col-md2">

                        <span>类型</span>

                    </div>

                    <div class="layui-col-md2">

                        <span>级别</span>

                    </div>

                    <div class="layui-col-md2">

                        <span>记录日志</span>

                    </div>

                    <div class="layui-col-md2">

                        <span>动作</span>

                    </div>

                </div>

                <div class="data-content">

                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover" id="car" >

                    </table>

                </div>

            </div>

        </div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

//引入layui

<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>

 

<script>

var checkList = [

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "低危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "中危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "中危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "中危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "***",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "16",

            "fileType": "木马病毒",

            "fileLevel": "中危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "17",

            "fileType": "木马病毒",

            "fileLevel": "中危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "18",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "19",

            "fileType": "木马病毒",

            "fileLevel": "低危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "20",

            "fileType": "木马病毒",

            "fileLevel": "低危",

            "fileLog": "是",

            "action": "阻止"

        },

        {

            "filtErl": "usbfs://> ki",

            "fileName": "21",

            "fileType": "木马病毒",

            "fileLevel": "高危",

            "fileLog": "是",

            "action": "阻止"

        }

    ]

 

$(function () {

 getCheckList();

function getCheckList() {

            if (checkList) {

                $('#car').html("");

                for (var i = 0; i < checkList.length; i++) {

                    var level = '<td style="color:#F5AC28"><span>' + checkList[i].fileLevel + '</span></td>'

                    $('#car').append('<tr><td><span>' + checkList[i].filtErl + '</span></td><td><span>' + checkList[i].fileName + '</span></td><td><span>' + checkList[i].fileType + '</span></td>' + level + '<td><span>' + checkList[i].fileLog + '</span></td><td>　　　　　　       　　　　<span>' + checkList[i].action + '</span></td></tr>')

                }

                $('td').addClass('layui-col-md2');

            }

        };

 

 

 

            //滚动列表

            var $uList = $("#car");

            var timer = null;

            function scrollList() {

                var scrollHeight = $("#car tr:first").height();

                $uList.stop().animate({

                    marginTop: -scrollHeight

                },

                900,

                function() {

                    $uList.css({

                        marginTop: 0

                    }).find("tr:first").appendTo($uList);

                });

            }

            $uList.hover(function() {

                clearInterval(timer);

            },

            function() { 

                timer = setInterval(function() {

                    scrollList();

                },

                1000);

            }).trigger("mouseleave");

        });

</script>