`
jiangpan
  • 浏览: 53793 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

在div标签内的table height 属性设置

    博客分类:
  • Html
阅读更多

    如果是嵌套调用( <div> <table   height=100%> <tr> .... </tr> </table> </div> )的话就会存在table设置成height=100%就不能100%的占用高度,只能根据内容多少就占用多少高度的问题,其具体原因是:

    table的height的100%的意思是他的高度是外部div的高度的100%,但是你的div的高度没有设置,所以table的高度的100%就是0,所以跟没有设置一样,只是按照你的数据的高度显示(可以看成被数据挤长了的).
    因此,要解决这个问题,只需要将div加一个css修饰就可以了: <div   style= "height:100% "> .....
    当然,如果div外面还有镶嵌,那么div这个100%也依赖于他外层的元素,以此类推,一直到他的外层元素是 <body> 为止,这个100%才是你的浏览器的高度的100%.

分享到:
评论

相关推荐

    div 内table 居中实现代码

    需要注意的是,为了使`vertical-align`属性生效,div的`display`属性需要设置为`table-cell`,这样div就会表现得像表格中的一个单元格。然后,将`vertical-align`设置为`middle`,即可实现垂直居中。 然而,在代码...

    div+css公共属性

    16. `table`: 设置表格样式,包括底边距、宽度、表格单元格的内边距等。 17. `th`, `td`, `caption`: 分别定义表头、数据单元格和表格标题的样式,如背景色、字体加粗、斜体等。 这些属性是`div+css`布局中常见的...

    div和table横向和纵向滚动条问题

    首先,为了实现横向滚动条,我们需要将`table`元素包裹在一个`div`容器内。这个`div`设置`overflow-x:auto`属性,使得当`table`的宽度超过`div`的宽度时,`div`会出现横向滚动条。同时,为了避免与表格内部的纵向...

    vue中设置height:100%无效的问题及解决方法

    本文主要讨论了在Vue.js项目中遇到的设置height:100%无效的问题,分析了原因,并提供了一种通过CSS修改来解决此问题的可行方法。通过确保html和body元素具有合适的高度,可以使得Vue组件中的元素高度设置正确地工作...

    DIV+CSS属性设置参数.docx

    1. **Line-height** (行距): 这个属性用于设置元素中文本的行间距,可以是数值、百分比或者长度单位。例如,`line-height: 20px;`将设置文本的行间距为20像素。 2. **Background-image** (插入图片): 用于设置元素...

    DIV+CSS属性设置参数 (2).pdf

    首先,`line-height`属性用于设置文本行之间的距离,即行距。它可以是一个数值、百分比或长度单位,如`1.5`、`120%`或`20px`,以调整文本的可读性。 `background-image`属性允许插入背景图片,通常配合`background-...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    html div没有被撑开的原因及解决办法

    通过使用`lj_设置子dom的height 100%即可.png`、`必须清除子dom的float才能撑开父dom.txt`、`absolute存在的时候floate会失效.txt`、`css - div层为什么没有被自动撑开-.url`这些资源,你可以更深入地学习和实践这些...

    DIV+CSS属性设置参数.pdf

    本文将详细解析`DIV+CSS`中的各种属性设置参数,这些参数是构建网页布局和美化页面的关键元素。我们将逐一探讨行距、背景图像、宽度、高度、最大字符数等核心概念,并深入讲解各种排版、定位、字体样式、文本装饰...

    html列表标签

    表格标签是通过table标签实现的,border属性指定表格的边框,bordercolor属性指定表格的边框颜色,cellpadding属性指定单元格的内边距,cellspacing属性指定单元格的外边距。表格的下一级标签是tbody标签,tr标签...

    漂亮的table样式(内附css)

    6. **行高与列宽**:`line-height`属性控制行高,`width`属性设置列宽。例如,`line-height: 20px;`和`width: 200px;`。 7. **悬停效果**:使用`:hover`伪类可以为鼠标悬停在表格行或单元格上时添加样式,如`tr:...

    为什么我们不建议用Table布局

    Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%) (这会限制你页面设计的自由性。) 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。 (先花时间学一些CSS知识,会省去你以后大量的...

    DIV+CSS属性设置参数 (2).docx

    在网页设计中,`DIV+CSS`是一种常见的布局方式,它通过CSS(层叠样式表)来控制HTML元素(如DIV)的样式,使得页面结构清晰、可维护性更强。以下是一些重要的CSS属性及其作用: 1. **Line-height**(行距):设置...

    div垂直居中的N种方法

    通过设置`height`和`line-height`为相同的值,可以使得DIV内的文本或单行内容在容器内垂直居中。例如: ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 然而,这种方法的局限性在于它...

    el-table无限滚动+控制列是否显示+列排序(非json)

    至于**列排序**,在`el-table`中,可以使用`sortable`属性来指定列是否可排序,而`sort-method`则用于自定义排序逻辑。默认情况下,`el-table`支持对数字和字符串进行升序或降序排序。如果你的数据结构不是JSON格式...

    CSS网页布局DIV水平居中的各种方法[参考].pdf

    当一个容器内只有一行文字时,如果将这两个属性值设置为相同,文字就会垂直居中。例如: ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 这里的`overflow:hidden`是为了防止内容溢出...

    html标签及属性大全

    - **属性**:通常不包含属性,但在某些情况下可使用`lang`来指定页面的主要语言。 #### `&lt;HEAD&gt;` - **描述**:包含关于文档的元数据,如标题、样式表链接、脚本引用等。 - **属性**:不包含常见属性。 #### `...

    用JS来控制DIV样式的display属性

    ### 使用JavaScript控制DIV元素的Display属性 在网页开发过程中,我们经常会遇到需要动态显示或隐藏某个元素的需求。本文将详细介绍如何使用JavaScript(JS)来控制HTML中的DIV元素的`display`属性,从而实现元素的...

    用div+css模拟表格对角线

    在网页设计中,使用`div`和`CSS`来模拟表格对角线是一种常见的技术,尤其是在需要自定义样式或者在不支持`&lt;table&gt;`元素的环境中。本篇将详细讲解如何利用`div`和`CSS`实现这一效果,并通过提供的`demo.html`文件中的...

    HTML—div例子

    在ki2.css中,我们可以使用CSS的盒模型属性(如`width`,`height`,`margin`,`padding`,以及`display`)来调整`&lt;div&gt;`的布局: ```css .column { width: 50%; float: left; /* 使&lt;div&gt;并排显示 */ padding: 10...

Global site tag (gtag.js) - Google Analytics