关于表格高度在移动端某些应用内高度设置为百分比后不能被压缩问题的解决

最新推荐文章于 2023-05-12 13:04:59 发布
最新推荐文章于 2023-05-12 13:04:59 发布
阅读量961 收藏
点赞数
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/byc233518/article/details/51661180
版权
CSS 同时被 2 个专栏收录
19 篇文章 0 订阅
订阅专栏
HTML
15 篇文章 1 订阅
订阅专栏

这几天项目中用到table来展示一些数据，页面是一屏一屏这样的，有些页面又有别的内容，又有表格，想要数据完整的展示，开始想到使用VH做尺寸单位，这样就能根据当前视窗的高度来对表格高度进行压缩，实际使用过程发现在安卓机上，调应用自带浏览器打开后好像设置的高度没起作用一行，但是给他来个200%，又可以看到效果，所以就想到是不是表格默认有个最小高度，于是就对行高做了处理，用rem来设置了一下行高，然后又对表格整体设置了一个百分比高度，总算凑活显示了，不知道为何那个应用内调出的浏览器就不能适应高度，在手机自带浏览器或者装别的浏览器都是OK的，效果如下图


无名前端小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
10-16
今天小编就为大家分享一篇解决layui-table单元格设置为百分比在ie8下不能自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
移动端表格多列进行缩放，并且正好对应父元素窗口
weixin_34849724的博客
04-03 378
function autoWidth(divTable,table){ var f_w =$("#"+divTable).width()+2//父元素窗口；+2为两像素边框 var s_w = $("#"+table).width()//获取表格的宽度 var scale_v=f_w/s_w//缩放值 ...
【网页开发】css关于移动端自适应以及transform的scale()缩放白边问题
小卓仗剑走天涯的博客
01-19 5678
css关于移动端自适应以及移动端transform的scale()缩放白边问题
移动端REM布局自动等比缩放还原设计
superw的博客
11-18 507
同学们面对移动端不同分辨率的手机，肯定也为自适应的布局头大吧。 有了REM一切好像变的简单了，现在一般移动端的设计宽度都是750PX，或者640PX.今天我们就以750的设计稿为例讲下怎么还原设计吧。 在750px下 html{font-size: calc(100vw/7.5);} 100vw=750px–>font-size:750px/7.5 -->100px–>1rem。这里两个概念，一是VW就是手机屏幕宽度的单位，不管你手机屏幕实际宽是多少都可以用100VM来表示，类似于是一
JAVAScript：mobile端，基于transform-origin和tranform（scale），实现表格缩放
Justinjiang1314的博客
12-22 2736
需求： 1，实现表格区域的缩放，而不是整个页面。整个页面包含toolbar + table。 其中只缩放table区域 2，已用户操作处进行缩放，而不是固定的某个点，例如中心点，或左上角，笔记缩放时，数据跳动 实现的基本原理： 利用transform-origin，来确定进行缩放的固定点，也就是用户进行缩放的点， 同时利用transform:scale(value)来实现缩放
移动端简易表格，我不允许你还不会
qq_45989814的博客
11-29 1139
移动端表格，表格展示数据
Datatable使用问题01 - 响应式表格由PC到移动
Who__am_i的博客
12-03 845
在使用bootstrap开发前端页面时，使用Datatable.js渲染表格部分，但默认状态下的Datatable的表格在自适应时存在屏幕分辨率缩小到小于表格内容后表格内容便会开始换行，如下图1 在数据与列较多的情况下，自适应到小分辨率会出现内容堆积中一起的现象，影响阅读表格内容。 图1 自适应PC的小窗口 为了使表格的内容不再换行，有两种方法可以实现，但两种方法都有一些缺点，以下为详细说明 一...
table标签-移动端适配
欢迎光临~
05-12 1622
封装一个组件，该组件需要根据不同设备屏幕宽度自适应调整展示方式。对于 PC 端，以类似 el-table 的形式展示数据，而移动端则以一个类似 item 的形式展示每行数据。来判断设备类型，如果是移动端，则展示列表形式，否则展示表格形式。在样式上需要注意调整边距和间距，使其更适合移动端的展示。以上是一个简单的实现方式，您可以根据具体需求进行修改和扩展。布局和自适应宽度来实现，每个数据项用一个。对于 PC 端的表格形式，可以使用标准的。对于移动端的列表形式，可以使用。元素来实现，样式上可以参考。
table-responsive响应式表格,手机端表格自适应
nuanpang的博客
12-12 1105
【代码】table-responsive响应式表格,手机端表格自适应。
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
09-28
默认情况下，表格的宽度和高度根据内容自动调整，我们也可以手动设置表格的宽度和高度。基本语法语法解释通过WIDTH属性定义表格的宽度，HEIGHT属性定义表格的高度，单位是像素或百分比。如果是百分比，则可分为两种
CSS百分比定义高度为什么没有效果
09-25
给div设置height=50%，往往没能看到效果，这是因为百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的
HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
09-28
默认情况下，表头的宽度高度根据内容自动调整，我们也可以手动设置表头的宽度和高度。基本语法语法解释通过属性定义表头的宽度，属性定义表头的高度，单位为像素或百分比。文件范例：10-39.htm设定表头的宽度和
使用flex + element ui table浏览器缩放问题
xunloveo的博客
11-04 1668
使用flex + element ui table浏览器缩放问题 场景：在两栏布局的情况下，左侧固定宽度， 右侧设为flex： 1，并且右侧内容有table布局，此时你放大浏览器，表格会相应的放大，但你缩小浏览器的时候，并不会相应的缩小，如下图所示， 图例来自它处 解决思路： 在flex为1的那个元素设置相对定位，并且添加一个子元素，设置绝对定位，宽度为100%,这样表格就能随之改变了 <div class="container"> <div class="left">
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
你好！刘斩仙
04-15 3459
简介 1.表头吸顶效果 2.左侧列固定，右侧滑动，表头跟随内容滑动 3.行高自适应 番外 最近上海疫情，居家办公一月多了，愿阴霾散去。最近网上在正常得市民抱怨中，有很多别有用心之人，数典忘祖，造谣生事，其心可诛。 如图所示 源码（复制另存txt，修改.html直接运行） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati
vue移动端学生课表将二维数组自动合并行
web_gutianle的博客
07-10 523
由于项目的vant组件库没有表格，所以在此采用了原生的table将二维数组进行自动合并行，代码不太简洁，大牛请绕路，嘻嘻嘻 formatData(data){//处理返回数据 let arr = data.slice(0,data.length-2) for(let i=0;i<arr.length;i++){ let num =0 for(let j=0;j<arr[i].length;j++){ .
手机端自适应表格table样式如何写
zhang01457的博客
09-14 3435
有时候我们的网页需要展示一些表格的内容，在pc端是很好控制它的展现方式的，但是到移动端就非常难控制了，那么该怎么做呢？ 比如上图就是没控制好的移动端的表格table样式，展示非常的凌乱。 这个就是写好的移动端的表格table样式，展现就非常的美观。 具体的移动端实现代码 table { table-layout: fixed !important; width: 100% !important; border-col.
html table 样式_通过CSS控制PC端的TABLE在移动端展示
weixin_39575737的博客
12-01 538
在不改变代码的情况下，通过CSS样式表在手机上展示表格内容PC端移动端HTML源码CSS处理的主要方法是：将 table, tbody, tr 改为display: block。将td转换为 display: inline(和span一样的效果)这对特顶的td，设置例如颜色、背景色、位置等来改变效果假定table的class是 the-table，CSS示例代码如下：.the-table, .th...
html移动端表格插件,移动端类table组件封装
weixin_42399813的博客
06-27 1939
简介一个不怎么高度自定义的移动端table组件，可创建不定数量的列的table(自己写着玩为了以后维护修改样式方便封装起来的实现思路表格头部一个循环：循环渲染每一列的列名表格内容两重循环：外层循环渲染行，内层循环渲染每一行的每一列的内容实现环境：vue + vantui，用van-row + van-col模拟行和列// 封装的table组件{{item.name}}export default ...
使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices
热门推荐
又是再见?
09-05 12万+
我使用的是小米（红米NOTE2 ）,电脑是win 10 系统，以下几步就可以轻松使用浏览器内置的功能调试移动端网页了： 1. 手机开启调试模式连接电脑，确保是调试模式连接的（不知道怎么打开调试模式的可以参考：http://jingyan.baidu.com/article/046a7b3ee3b565f9c27fa9b2.html）； 2. 手机上打开一个网页，只要是webview形式的网页应
jqGrid设置高度为百分比不起作用
最新发布
05-24
jqGrid 的高度是以像素为单位计算的，因此设置百分比高度不会起作用。如果您想要根据页面大小自适应调整 jqGrid 的高度，可以使用如下方法： 1. 在 jqGrid 初始化时，获取页面高度并设置 jqGrid 的高度： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值