table表格自适应高度的办法

2020-07-03 13:04:12

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了table表格自适应高度的办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

关于自适应高度，361源码在以前给大家介绍过iframe的自适应高度的方法，有需要了解的朋友可以参看《如何通过javascript或者jquery实现iframe自适应内容高度和宽度》一文。昨天在制作专题中需要做一个单价展示的内容，用到了table元素，但是发现内容过多，高度会超出页面高度，用户体验很不好，于是，想写一段css来实现table自适应高度，代码很简单，361源码时刻不忘把有用的技术和代码分享给广大草根站长朋友，嘿嘿，下面就是361源码小编实现table自适应高度的完整代码：

<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%;min-width: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>

运行效果如下：

table表格自适应高度的办法