如何填充表格中正确的行数，以适应不同屏幕分辨率的页面高度？ [英] How to fill the table with the correct number of rows to fit the page height in different screen resolution ?

问题描述

我在前端后面开发了自己的Web-Admin。这是一个典型的具有容器的管理员，左侧有一个菜单导航，右侧的主体内容显示与所点击的菜单项相关的结果（通常是表格）。

在表格中获取正确的数字或​​行以便适合100％的正文页面的最佳方法是什么？

在我的例子中，看到在改变屏幕分辨率时，填充表格空间所需的光纤数量是不同的。

我知道一个快速的解决方案可能是计算分辨率，该表在知道屏幕分辨率之后填充。我想知道如果可能在运行时根据屏幕分辨率或以其他方式设置TD或TR高度。

谢谢，

解决方案

这里是一个小提琴，演示

< table id =mytable>< / table>


CSS

  td {
 height：20px; 
} 
  

JavaScript

  var numberOfRows = Math.floor（window.innerHeight / 20）; 
 
 var table = document.getElementById（mytable）; 
 
 function createCell（）{
 var cell = document.createElement（td）; 
 cell.innerText =Cell; 
 return cell; 
} 
 
 function createRow（）{
 var row = document.createElement（tr）; 
 row.appendChild（createCell（））
 return row; 
} 
 
 for（var i = 0; i< numberOfRows; i ++）{
 table.appendChild（createRow（））; 
} 
  

PS。 1 我已在CSS中设置单元格的高度，这可以有所不同

PS。 2 我已经在屏幕上显示了适合的行数。因此底部会有一些空白的空间。

I developed my own Web-Admin behind the front-end. It's a typical Admin with container , one menu-navigation in the left and a body content in the right which shows the result (typically a table) related to the clicked menu item.

What is the best way to get the correct number or rows in the table in order to fit the the body page at 100% ?

In my case, i have seen that the number of tow required to fill the space in the table is different while changing the screen resolution.

I know a quick solution could be to calculate the resolution and get the table populated after knowing the screen resolution. I was wondering if if possible to set the TD or TR height at runtime, based on the screen resolution or somehow else.

Thanks,

解决方案

Here is a fiddle that demonstrates the rendering of rows depending on the browser innerHeight.

HTML

<table id="mytable"></table>​

CSS

td {
  height:20px;
}​

JavaScript

var numberOfRows = Math.floor(window.innerHeight / 20);

var table = document.getElementById("mytable");

function createCell() {
    var cell = document.createElement("td");
    cell.innerText = "Cell";
    return cell;
}

function createRow() {
    var row = document.createElement("tr");
    row.appendChild(createCell())
    return row;
}

for (var i = 0; i < numberOfRows; i++) {
    table.appendChild(createRow());
}​

PS. 1 I've set the height of the cell in CSS, this can be done differently
PS. 2 I've floored the number of rows that fit on the screen. So there will be some empty space at the bottom.

这篇关于如何填充表格中正确的行数，以适应不同屏幕分辨率的页面高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！