javascript - 如何在表格移出视图（高度）时动态拆分表格

我对您的项目非常感兴趣，并找到了一个可行的解决方案。我想这就是你想要的。

通过使用 - 用于报纸栏目布局的 jQuery 插件

但如果窗口大小发生变化，您必须刷新页面以调整表格高度。

// Create table dynamically 
var i, j;
	var table = "";
	for (i = 1; i < 8; i++) {
	  table += `<table data-id="` + i + `" cellspacing="0">
			<tr>
				<td colspan="4" class="head">` + i + ` Table</td>
			</tr>
			`;
	  for (j = 1; j < i * 20; j++) {
	    table += `<tr>
				<td>` + j + ` </td>
				<td>` + j + ` </td>
				<td>` + j + ` </td>
				<td>` + j + ` </td>
			</tr>`
	  }
	  table += `</table>`;
	}
	document.getElementById("npcolumns").innerHTML = table

// columnize script
	$(function() {
	  var hiht = $(window).height() - 50;
	  console.log(hiht);
	  $('.npcolumns').columnize({
	    width: 230,
	    height: hiht,
	    columns: 5,
	    buildOnce: true,
	    doneFunc: function() {
	      $('<tr><td colspan="4" class="head continue"></td></tr>').insertBefore('table > tbody.split');
	      $("table").each(function() {
	        var curTable = $(this);
	        var tableHead = $(curTable).attr('data-id');
	        var cell = $(this).find("td.continue");
	        $(cell).html(tableHead + " Table Continue");
	      });
	    }
	  });
	});

table {
  border: thin solid rgba(0, 0, 0, 1.00);
  width: 200px;
  text-align: center;
  margin-bottom: 30px;
}

table td.head {
  border: thin solid rgba(0, 0, 0, 1.00);
  background-color: yellow !important;
}

table td {
  border: thin solid rgba(0, 0, 0, 1.00);
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Newspaper-Column-Layout-Columnizer/src/jquery.columnizer.js"></script>
  </head>
  <body>
    <div id="npcolumns" class="npcolumns"></div>
  </body>
</html>

javascript - 如何在表格移出视图（高度）时动态拆分表格 - CSS，JS

问题描述

解决方案

推荐阅读