h5 table记录

菜鸟教程在线编辑器直接下方demo中的代码复制，粘贴到上方的编辑器中即可使用

记录背景

jquery老项目维护，需要使用table，又不想引用插件时，可以进行复制
虽说是老掉牙的基础，因笔者经常会出现“提笔忘字”的情况，特此记录，不喜勿喷

固定表头table

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>table表格，thead固定，tbody滚动条</title>
    <style>
      table tbody {
        display: block;
        height: 195px;
        overflow-y: scroll;
      }
      table thead,
      tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
      }
      table thead { 
      } 
    </style>
  </head>
  <body>
    <table width="100%" style="page-break-before:always"  border="1" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody id="demo">
      </tbody>
    </table>
	  <script>
		  var model=''
		  for(i=1;i<30;i++)
		  {
			  model+='<tr>'+
				  '<td>测试'+i+'</td>'+
				  '<td>'+i+'</td>'+
				  '</tr>'
		  }
		  document.getElementById("demo").innerHTML=model
	  </script>
  </body>
</html>

小知识

css属性page-break-before:always：跟打印（window.print()）有关，利用此属性可进行打印分页的设置。

有问有答

问题：
有的小伙伴，这么设置后分页打印会出现断层问题。
回答：
基础性问题table的构建不规范（比如不写tbody），请严格按照以下格式进行构建即可。

 <table>
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
        </tr>
      </tbody>

无缝滚动table

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <title>table无缝滚动</title>
  <style>
    .container {
      position: relative;
      height: 500px;
      overflow-y: hidden;
    }

    table tbody {
      display: block;
      height: 100%;
    }

    tbody {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    thead {
      position: relative;
      background: #1d2667;
      color: #fff
    }

    table thead,
    tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      z-index: 999
    }
  </style>
</head>

<body>
  <div class="container">
    <table width="100%" style="page-break-before:always" border="1" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody id="demo">
      </tbody>
    </table>
  </div>
  <script>
    var model = ''
    var items = 30
    for (i = 0; i < 30; i++) {
      model += '<tr>' +
        '<td>测试' + i + '</td>' +
        '<td>' + i + '</td>' +
        '</tr>'
    }
    document.getElementById("demo").innerHTML = model
    
    $('#demo').html($('#demo').html() + $('#demo').html());
    $('#demo').css('top', '0');
    
    var demoTop = 0;
    var demo_speed = 50; //计时器秒数,数字越小滚动越快
    var outerHeight = $('#demo').find("tr").outerHeight(); //行高
	//计时器  
    function demo_scroll() {
      if (demoTop <= -outerHeight * items) {
        demoTop = 0;
      } else {
        demoTop -= 1;
      }
      $('#demo').css('top', demoTop + 'px');
    }
    demo_interval = setInterval(demo_scroll, demo_speed);

    // 鼠标移上去取消事件
    $('#demo').hover(function () {
      clearInterval(demo_interval);
    }, function () {
      clearInterval(demo_interval);
      demo_interval = setInterval(demo_scroll, demo_speed);
    })
  </script>
</body>
</html>