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

2023-12-22

我在前端开发了自己的网络管理。这是一个典型的 Admin,其中包含容器、左侧的一个菜单导航和右侧的正文内容,其中显示与单击的菜单项相关的结果(通常是表格)。

为了以 100% 适合正文页面,获得表格中正确的行数或行数的最佳方法是什么?

就我而言,我发现在更改屏幕分辨率时,填充表格中的空间所需的拖曳数量是不同的。

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

Thanks,


这里有一个fiddle http://jsfiddle.net/MdN5z/演示了根据浏览器内部高度呈现行的情况。

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我已经确定了适合屏幕的行数。所以底部会有一些空白。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何用正确的行数填充表格以适应不同屏幕分辨率下的页面高度? 的相关文章

  • 如何根据子宽度设置 div 的宽度?

    我想使用 HTML 和 CSS 创建一个类似于 UI 的线程视图 聊天收件箱 http jsfiddle net 7mbaksvj http jsfiddle net 7mbaksvj 我的问题是 div 的宽度 它以固定宽度的形式出现 但
  • 使用 CSS 让图像位于文本后面并使其保持在中心位置

    我正在创建一个网页 其中有一个要放置在中心的图像 在该图像的顶部 我想要有输入框 标签和提交按钮 我正在尝试使用这个CSS img center z index 1 但这不起作用 当我将代码更改为 img center position a
  • getScript 本地加载而不是全局加载?

    根据我的阅读 JQuery 的 getScript 函数使用名为 global eval 的函数在全局上下文中加载脚本文件 是否有特定的设置或方法可以更改此设置 以便它将改为在我调用它的函数中加载 如果我执行以下代码名称 则返回未定义 因为
  • 通过向导方法使用内置 ASP.NET MVC 验证

    我正在使用JQuery Steps 插件基本表单示例 http www jquery steps com Examples basic form为了我的巫师 在此示例中 您会注意到他们使用的是 JQuery Validate 插件 该插件与
  • 关闭 bootstrap-select / select2 的自动对焦

    http www bootply com YAQrE52K6X http www bootply com YAQrE52K6X dataCombo selectpicker multiple true div class container
  • 隐藏行时更新奇数/偶数行颜色

    我在一页上有几个表格和一个复选框 用于根据其中一个单元格的内容显示 隐藏行 虽然所有行都是可见的 但一切都很完美 并且行颜色根据需要交替 当我隐藏行时 交替的行颜色不再正确 显然 如何轻松更新类以在选中复选框时保持交替行颜色 然后在取消选中
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • CSS 中“body > *”是什么意思?

    我试图了解 jQTouch 实现的 CSS 效果 http www jqtouch com http www jqtouch com 它有一些 CSS 定义 其中包含如下语法body gt body gt webkit backface v
  • 如何在块元素之间添加垂直间距,但不添加顶部和底部

    假设我有一堆 P LI 或 DIV 元素 它们之间没有任何内容 我想控制它们之间的垂直间距 这样它们就不会贴得那么紧 但我不想添加任何顶部和底部空间 因为这是由父元素处理的 我不需要更多 有没有一种适用于所有块元素的简单方法 假设我有这样的
  • 最有用的 jQuery 原生 API 函数

    前 5 10 个最常用的 jQuery 本机 API 函数是什么 请不要建议 jQuery 函数本身 因为毫无疑问这是最常用的函数 如果可能的话 还请提供它们所涵盖的场景 提出这个问题的原因是我尝试创建一个类似 jQuery 的 API充足
  • 重定向后 HTML5 CORS 请求在 safari 中失败

    我正在使用 jQuery 制作 CORS 请求来完成 SSO 类型系统 用户登录 WordPress 同时使用钩子也登录 Moodle 我遇到的问题是 在 Safari 中 仅限 safari 7 当初始 POST 请求设置为 mudles
  • 网页优化:为什么组合文件速度更快?

    我读过 将所有 css 文件合并为一个大文件 或将所有脚本文件合并为一个脚本文件 可以减少 HTTP 请求的数量 从而加快下载速度 但我不明白这一点 我认为如果你有多个文件 最多有一个限制 我相信在现代浏览器上是 10 个 浏览器会并行下载
  • 头部带有脚本的 Nodejs EJS 部分

    我正在使用 EJS 从 Nodejs 服务器渲染和服务器 HTML 页面 我包含的一些部分在头部引用了脚本和样式表 但这会导致客户端对同一文件发出多个请求 例如 如果父视图也包含该文件 例如
  • 如何在GEB中选择内部元素的文本?

    我有以下场景 div ul class select2 results style width 400px li class select2 results dept 0 select2 result select2 result sele
  • Jquery 对话框部分视图服务器端验证“保存”按钮单击

    我有一个显示数据的表格 表格的每一行都有编辑按钮 单击编辑按钮时 将出现一个 jquery 对话框 其中包含用于编辑用户信息的表单以及保存和取消按钮 表单只不过是部分视图 按钮是部分视图的一部分
  • CSS:100% 宽度和背景?

    在我的页面中 有 2 3 个部分的宽度和背景为 100 当我全屏打开它时 一切正常 但当屏幕小于 960px 本节内容的宽度 时 背景图像不是整个页面 右侧的瞬间隐藏在没有背景的地方 它是白色的 你可以在这里明白我的意思 http mico
  • 问号字符显示在文本中。为什么是这样?

    我有一个备份服务器 可以自动备份我的实时站点 包括文件和数据库 在实时站点上 文本看起来不错 但是当您查看它的镜像版本时 它会显示 在某些文本中 该文本存储在新闻数据库表中 这是实时服务器和镜像服务器上的屏幕截图 将其备份到镜像服务器的过程
  • 如何在 React Native 中做最后一个子选择器?

    我使用Scrollview 里面有3个视图 我在它们之间留了一个间隙 例如 marginRight 5 但我不希望在最后一个视图中出现这种间隙 这就是为什么我需要这种东西 你能帮助我吗 应用这个你就可以实现你在寻找什么 const styl
  • 在 Safari for Lion (OS X 10.7) 中设置滚动条颜色

    Lion 中的新滚动条似乎会根据 body 元素的背景颜色调整 Safari 中的颜色 有没有办法手动设置滚动条是深色还是浅色 我知道有 webkit CSS 选项来设置滚动条的样式 这实际上早于新的 Lion 滚动条 我使用该方法的唯一问
  • Bootstrap $('#myModal').modal('show') 不起作用

    我不知道为什么 但所有模态功能都不适用于我 我检查了版本和负载 它们都很好 我不断收到此错误消息 Uncaught TypeError modal is not a function 对于隐藏我已经找到了替代方案 代替 myModal mo

随机推荐

  • z-index 在 ipad 上不能很好地工作

    我正在为朋友建立一个网站 http pasionesargentas com sm http pasionesargentas com sm 与带缩略图翻转的全屏图库 http tympanus net codrops 2011 02 09
  • css div高度100%问题?

    我想要一个 div 占据所有屏幕高度 这就是为什么我找到以下链接 http www webmasterworld com forum83 200 htm http www webmasterworld com forum83 200 htm
  • 重用PreparedStatement中的参数?

    我将一个参数传递给一个PreparedStatement 如下所示 public void getNodes String runId File file Connection conn PreparedStatement ps null
  • 我可以在 QNX 上使用 Java 吗?

    我必须侍奉两个主人 一个项目预计在 v1 0 后将一分为二 它最初是一个使用 FreeRTOS 用 C 语言编码的简单嵌入式项目 直到 v1 0 为止 后来 一位大师说我们必须使用QNX来取悦合作伙伴 否则就会失去交易 而另一位大师则说我们
  • 在 rmarkdown 中创建模板

    我正在尝试创建自定义模板 但它不会显示 我已经尝试跟随https bookdown org yihui rmarkdown template struct html https bookdown org yihui rmarkdown te
  • Power Query 为空时上移值

    目前 我在 Excel 中有一个大表 我想将其与动态下拉列表 级联选项 一起使用 根据您在第一个下拉菜单中所做的选择 然后在下一个单元格中 您应该有一个经过筛选的下拉菜单 此外 任何选项对于所选的主类别都是唯一的 我做的第一件事是获取我需要
  • fsock:无法找到套接字传输“http”

    我想用 fsock 发送后变量 但是当我尝试这个时 post arr array a gt b addr http 1 2 3 4 confirmation html fp fsockopen addr 80 errno errstr 30
  • 使用 CloudFormation 添加对 AWS websocket API 的集成响应

    AWS recently released Cloudformation support for templating websocket API gateways https aws amazon com about aws whats
  • JFreechart 中漂亮的饼图

    是否有可能在 JFreechart 中为饼图获得复杂 漂亮的颜色 我的意思是我怎样才能获得如图所示的颜色link http upload wikimedia org wikipedia commons b bf Ml wiki photo
  • SVG 错误:访问属性“someFunction”的权限被拒绝

    请看一下这个小提琴 http jsfiddle net arasbm Tyxea 14 http jsfiddle net arasbm Tyxea 14 正如你所看到的 我想在 SVG 元素上触发事件时对其进行转换 您可以单击箭头 它应该
  • 复制二进制文件的内容

    我正在设计一个图像解码器 作为第一步 我尝试复制使用 c 即打开文件 并将其内容写入新文件 下面是我使用的代码 while c getc fp EOF fprintf fp1 c c 其中 fp 是源文件 fp1 是目标文件 程序执行时没有
  • 字母数字和 + 字符的正则表达式

    我需要一个仅允许字母数字加上 和 字符的正则表达式 现在我正在使用 w 以下模式将匹配仅包含字母 数字 或 的字符串 包括 或 等国际字符 并且不包括 中包含的 字符 w p L p N 例子 string pattern p L p N
  • Azure AD 的访问令牌颁发者是 sts.windows.net 而不是 login.microsoftonline.com

    我正在尝试验证从 azure Active Directory 获取的访问令牌 我从以下位置获得了令牌https login microsoftonline com my tennant guid v2 0 返回的令牌中的发行者是https
  • 应用程序引擎 + 模块 + Maven 的开发工作流程

    我们最近将我们的应用程序引擎项目按照以下结构转换为模块 这个新的开发工作流程的问题是 我们必须在每次更改时重建 EAR 并重新启动应用程序引擎本地开发服务器 这使得每次我们更改代码并想要测试它时 我们都会浪费 30 秒到一分钟的时间 com
  • PorterDuffXfermode DST_IN 未按预期工作

    因此 我试图加快我们正在做的一些绘制 使用 alpha 透明度绘制弧的一部分 并尝试将整个弧缓存到单独的位图中 并使用 alpha 遮罩有选择地显示它 根据我所做的研究 Android 的 Xfermodes API 演示 这个例子 htt
  • Swagger UI 将身份验证令牌传递给标头中的 API 调用

    我是 Swagger 的新手 我正在使用 Swagger UI 生成 swagger 文档 我有两个 API 调用 第一个调用是根据用户名和密码生成令牌 第二次调用需要第一次调用生成的令牌 如何使用 Swagger UI 设置第二次调用的令
  • 如何创建 AvalonEdit 语法文件 (.xshd) 并将其嵌入到我的程序集中?

    我正在尝试为 AvalonEdit 定义一些自定义突出显示规则 似乎没有任何相关文档 有有关文件格式的一些文档 http www codeproject com KB edit AvalonEdit aspx 但没有介绍创建定义后如何实际加
  • 创建增量按钮,如果边距大于 2800 像素,该按钮将关闭

    我正在制作一个滑块 并且正在尝试弄清楚如何专门对按钮进行编程 我希望它在单击时以 700 像素的增量向左移动 但是一旦 marginLeft 大于 2800 像素 因为单击时它不会执行任何操作 现在我有以增量移动容器的部分 但我不确定如何制
  • pyspark - 合并 2 列集合

    我有一个 Spark 数据框 它有 2 列由函数collect set 形成 我想将这两列集合合并为一列集合 我应该怎样做呢 它们都是一组字符串 例如 我有两列是通过调用collect set形成的 Fruits Meat Apple Or
  • 如何用正确的行数填充表格以适应不同屏幕分辨率下的页面高度?

    我在前端开发了自己的网络管理 这是一个典型的 Admin 其中包含容器 左侧的一个菜单导航和右侧的正文内容 其中显示与单击的菜单项相关的结果 通常是表格 为了以 100 适合正文页面 获得表格中正确的行数或行数的最佳方法是什么 就我而言 我