table 自适应高度的解决办法

最新推荐文章于 2024-06-12 10:56:41 发布
最新推荐文章于 2024-06-12 10:56:41 发布
阅读量1.9w 收藏 1
点赞数 5
分类专栏： css 文章标签： html css
可支持IE6+,firefox,chrome。其中容易被忽略的是 
<DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">  
，不能使用XHTML  
<DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">
<html>
	<HEAD>
		<title>table布局中自适应高度的解决办法</title>
<style type="text/css">
html,body{height:100%;font-size:12px;}
td {border:1px solid red;font-size: 12px;color: #000000;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}
#main{border:1px solid red;width:100%;min-height:100%;height:100%;overflow:hidden !important;overflow: visible;}
#header{height:94px;border:1px solid red;}
</style>
</head>
<body>
<table id="main">
	<tr><td id="header">我的顶部</td></tr>
	<tr><td>我是主要内容</td></tr>
</table>
</body>
</html>

我是主要内容
Fay_Q
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html td高度自适应,Element Table 自适应高度解决方案
weixin_28721743的博客
06-24 1565
分析如下图(此方案中使用的是Element Table官网copy的代码(多用于OA, CMS, ERP这类系统中)如上图大体目前没有问题，但是存在细节问题那就是在table在滚动的过程中表头没有了如果说这里的列比较多，用户需要查看的数据在最后面，每次某个列的数据对应的是什么意思(尤其是表格数字比较多的话,非常恼火)，需要上下来回滚动table 内容才能解决所以说我们要解决的就是表头固定 ①(标记...
table自适应宽度
weixin_34248849的博客
06-28 3460
WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——...
关于table布局中自适应高度的解决办法
shuaijie506
09-27 1945
可支持IE6+,firefox,chrome。其中容易被忽略的是 [b][color=red][/color][/b] ，不能使用XHTML [code="html"] table布局中自适应高度的解决办法 html,body{height:100%;font-size:12px;} td {border:1px solid red;font-size: 12px...
双tab 栏 实现表格高度自适应 遇到的一些问题
最新发布
qq_40603125的博客
06-12 161
使用el-tab中自带的。
Element ui ＜el-table＞表格高度自适应
weixin_56796650的博客
05-10 1303
element ui搭配vue实现表格el-table高度自适应，可以自定义留出的距离
用table来布局_是页面高度自适应
包子大叔的笔记
12-09 346
[code="java"] 用表格做整个页面的布局，将需要自动适应的地方放在高度100%的td中 例如： 系统名称： ...
CSS布局自适应高度解决方法
我是一阵中国风
07-30 456
原作者:Alex Robinson原文标题:Equal Height Columns这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 先看代码：#wrap{ over
vue ant desgin 中 table自动高度
走错路的程序员
11-28 1914
vue ant desgin 中 table自动高度 <template> <div> <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="发货单" sub-title="12" @back="() => null" > </a-page-header> <div class="table-op
解决Layui 表格自适应高度的问题
12-13
鄙人在写一个项目，发现成功将数据在页面显示后， 高度没有自适应，而是将一些按钮遮挡了，不断的调试和网上寻找解决办法，发现没有效果，最后添加了一句css  <style> .layui-table-cell{ display:table-...
Vue 自适应高度表格的实现方法
10-15
总结来说，实现Vue自适应高度表格的关键在于理解Element-UI的`el-table`组件和Vue的自定义指令机制。通过自定义`v-adaptive`指令，我们可以监听窗口尺寸变化并实时调整表格的高度，从而达到理想的自适应效果。这种...
iview table高度动态设置方法
08-27
iview Table 高度动态设置方法 ...iview Table 高度动态设置方法是解决固定高度设置问题的有效方法。通过使用 JavaScript 动态地设置表格高度，我们可以使得表格适应不同分辨率的屏幕，从而提高应用程序的用户体验。
ant design vue table 高度自适应_我不能没有的5个Vue.js库
weixin_39640904的博客
11-13 552
ant design vue table 高度自适应_现在很火的 vue 学习篇 （一）
weixin_39520880的博客
10-27 643
大家有什么想要了解的或者学习的，欢迎大家留言，我会整理好发出来大家一起讨论，共同进步。vue是一个轻量级框架，与其他重量级的框架不同的是，vue采用自底向上增量开发的设计。使用vue只需要关注视图层，不过使用起来让我感觉最不错的是vue的响应式数据绑定和组合试图组件。1.响应式数据绑定例如:通过v-model指令，我们把msg数据绑定到了input文本框，当我们修改文本框的值，发现msg数据随着i...
table 自适应TD的高度/宽度
天下无双
11-18 2万+
 或者： 或者 搞不懂
在ie中页面初始化时table列宽自动适配会变窄，不是100%的解决
qq_41604862的博客
06-30 677
解决在ie中页面初始化时el-table表格可能会变窄，不是100% <style lang="scss" scope> /deep/ .el-table__header { width: 100% !important; } /deep/ .el-table__body { width: 100% !important; } </style>
页面布局-表格自适应
打工人
01-03 566
页面布局-表格自适应
控制css的table样式宽、高，修改table的td值
qq_41961638的博客
07-07 709
注意在<table></table>中加入“table-layout:fixed;”，才可以修改其中的宽高、td值，否则这些值都无法改动 引自https://blog.csdn.net/weixin_30724853/article/details/98122582
html css 表格自动高度,轻松解决HTML + CSS各种表格问题
weixin_39603217的博客
05-30 544
项目中数据大多以表格形式呈现，这也就要求我们能够做出各式各样的表格，以前不太用表格，用的话也只是简单的形式，所以在第一次做表格的时候简直大写的懵逼，后来在网上学习了之后再加上自己的理解写了这篇博客，能够轻松解决表格问题，希望大家指点。1. HTML中的表格在HTML中，table元素中往往包含一个完整的表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。...
css-如何设置table中tr的高度
热门推荐
路漫漫其修远兮
01-18 2万+
设置tr的高度可以通过给td设置高度去改变tr的高度。 tr的高度会随着内容的改变而改变但是给td设置高度后tr的最小高度就是td的高度。  
封装el-table高度自适应
05-02
在Vue框架中，el-table作为一个非常实用的表格组件，可以方便地对表格进行展示、编辑、筛选、排序等操作。但是，在实际使用中我们往往会碰到一个问题，即当表格数据量过大时，el-table的高度无法自适应，导致页面出现滚动条，影响用户体验。 为解决这个问题，可以采用以下方法： 1. 使用v-if条件渲染，当表格数据为空时不渲染el-table组件，或者使用loading等Vue内置指令提示用户等待。 2. 设置表格的max-height属性，当表格数据量超过一定值时，限制表格的最大高度，并自动出现滚动条。 3. 监听窗口变化，实时计算可视区域的高度，并动态地调整表格的高度，从而达到自适应的效果。 示例代码实现如下（以第三种方法为例）： <template> <div class="table-wrap" ref="tableWrap"> <el-table :data="tableData" style="width: 100%" :height="tableHeight"> <!--表格列定义--> </el-table> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据 tableHeight: 0 // 表格高度 } }, mounted() { this.getTableData() // 获取表格数据 window.addEventListener('resize', this.handleResize) // 监听窗口变化 }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) // 销毁时移除监听器 }, methods: { getTableData() { // 获取表格数据 // ... this.tableData = [...] this.handleResize() // 初始化表格高度 }, handleResize() { // 计算可视区域高度并动态调整表格高度 const tableWrapEl = this.$refs.tableWrap const windowHeight = window.innerHeight const tableWrapOffsetTop = tableWrapEl.getBoundingClientRect().top const tableWrapMarginBottom = parseInt(window.getComputedStyle(tableWrapEl).marginBottom) const tableHeight = windowHeight - tableWrapOffsetTop - tableWrapMarginBottom this.tableHeight = tableHeight > 0 ? tableHeight : 0 // 高度不能为负数 } } } </script> 通过这种方式，可以让el-table组件高度自适应，提高用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值