jquery – 如何使用正确的行数填充表格以适应不同屏幕分辨率的页面高度？

2023年8月29日 165次阅读

我在前端开发了自己的Web-Admin.它是一个典型的Admin with container,左边是一个菜单导航,右边是body内容,显示与点击的菜单项相关的结果(通常是一个表).

获取表格中正确数字或行的最佳方法是什么才能使主体页面达到100％？

在我的情况下,我已经看到填充表格空间所需的丝束数量在改变屏幕分辨率时是不同的.

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

谢谢,

最佳答案 这是一个
fiddle,它根据浏览器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我在CSS中设置了单元格的高度,这可以不同的方式完成
PS. 2我已经覆盖了适合屏幕的行数.所以底部会有一些空的空间.

点赞