`
chenfengcn
  • 浏览: 118369 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

table设置height属性不起作用的解决办法

阅读更多
  最近写JS对table的操作时,发现一个奇怪的现象,对table的width属性进行设置可以改变table的大小,但对table的height属性进行设置时,居然报没有这个属性。代码如下:
var table = document.getElementById("textTable");
table.width = 90%;  //这句可以正常执行并改变Table宽度
table.height = 50%;  //这句无法正常执行,使用alert(table.height);调试可发现,height属性不存在。

  经查,问题应该是在于这个HTML的文件头,我当前使用的文件头是:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  猜想应该是由于在这个xhtml的dtd里,table没有定义height这个属性,所以不能直接用table.height进行属性设置。
  当然,如果你使用其他的表头,有可能这样的设置方法是可以生效的,更详尽的原因还没时间去深究,希望有知道的高手们能指点一二。这里只给出我自己对于这个问题的解决方法。
  解决方法:根据经验,直接设置属性的方法行不通,可以尝试通过使用setAttribute()方法,居然可以了,代码如下:
var table = document.getElementById("textTable");
table.width = 90%;
table.setAttribute("height",50%);  //这里改成这样设置就解决了
2
0
分享到:
评论

相关推荐

    iview table高度动态设置方法

    首先,在 data 中初始化 tableHeight 变量,并将其设置为一个固定值,例如 450。 其次,在 mounted 生命周期钩子函数中,使用 JavaScript 动态地设置表格的高度。我们可以使用 window.innerHeight 属性来获取浏览器...

    html为内边框加颜色而嵌套TABLE边框不显示出来的两种方法.pdf

    总结起来,这两种方法都有效地解决了嵌套表格边框不显示的问题,但实现方式不同。第一种方法利用CSS控制边框的显示与隐藏,第二种方法则依赖于HTML属性来模拟边框效果。在实际开发中,根据项目需求和浏览器兼容性...

    table内容出现滚动条和表头对齐问题

    为了解决"table内容出现滚动条和表头对齐问题",我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先,让我们了解一下HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`元素开始...

    Float(浮动)导致的父容器背景不显示的解决方法

    这种情况下,如果父元素没有设置高度(`height`),或者内容不足以填满整个父元素,那么父元素的高度将不会自动扩展以包含浮动的子元素,导致背景色、边框等无法延伸到浮动元素的下方,即出现“浮动塌陷”。...

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

    下面我们将详细探讨这个问题的原因以及相应的解决办法。 **原因一:浮动(float)未清除** 在CSS中,当一个元素设置了`float:left`或`float:right`时,它会脱离正常文档流,不再对周围元素产生影响。但这种情况下,...

    div vertical-align不起作用解决办法

    总之,解决 `div vertical-align` 不起作用的问题,需要从多个角度去排查,包括但不限于文档声明、`line-height` 的设置、元素的`display`属性、以及浏览器兼容性和CSS优先级。通过这些方法,可以确保你的元素在垂直...

    网页制作中IE6个不兼容属性

    #### 六、Min-Height属性的兼容性 `min-height`属性用于设置元素的最小高度。IE6不支持这个属性,导致页面布局可能出现问题。 解决方法: 1. **使用JavaScript**:动态调整元素的高度。 2. **条件注释**:为IE6...

    前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果

    3. **行高设置**:类似地,行高通过设置`height`属性实现。例如,将第一行高度设为30: ```javascript ws['!rows'] = [{hpt: 30}]; ``` 4. **对齐方式**:有左对齐、居中、右对齐和两端对齐等选项。例如,设置...

    高度塌陷的产生条件和解决方法

    高度塌陷的产生条件和解决方法 高度塌陷是前端开发中经常遇到的问题之一,特别是在使用浮动元素时容易出现这种情况。那么,什么是高度塌陷?什么是高度塌陷的原因?如何解决高度塌陷问题?下面,我们来详细解释高度...

    VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    为了实现自适应高度,你需要在el-table元素上定义height属性。例如: ```html &lt;el-table :data="tableData" height="250" border style="width:100%"&gt; &lt;!-- 列定义 --&gt; &lt;/el-table&gt; ``` 在这个例子中,`...

    移动端android上line-height不居中的问题的解决

    `line-height`属性用于设置元素内文本行之间的垂直间距,通常用于实现垂直居中对齐。然而,在Android上,特别是使用`rem`单位进行响应式设计时,由于字体大小可能不是整数,导致`line-height`计算不准确,进而出现...

    JavaScript Table行定位效果

    table的border属性用来指定边框宽度,table特有的frame属性是用来设置或获取表格周围的边框显示的方式。 w3c的tabel的frame部分说明frame可以是以下值: void: No sides. This is the default value. above: The ...

    常见浏览器兼容性问题与解决方案

    当多个`img`标签相邻时,某些浏览器会显示额外的间距,即使使用通配符清除`margin`也不起作用。解决方法是利用`float`属性对图片进行布局,避免间距的出现。 最后,问题六提到了`min-height`属性在某些浏览器中的不...

    浏览器兼容问题

    **问题描述**:在 IE6-7 中,当图片与文字并排显示时,`line-height` 不起作用。 **解决方案**:将元素设置为浮动。 ```css .text-image { float: left; } ``` **解释**:通过将元素设置为浮动可以解决 IE6-7 中...

    解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

    当我们将这个元素的`height`属性更改为`100%`时,固定列的显示问题会得到解决。然而,由于固定列的DOM结构与表格主体分离,直接通过组件的CSS类来设置样式可能无效。 为了有效地修改固定列的高度,我们需要利用/...

    中级SWING-JTable属性

    为了更好地控制表格的表现形式及功能,`JTable`提供了多种属性设置方法。以下是对给定内容中提到的一些关键属性进行详细解析。 #### 1. `setAutoCreateColumnsFromModel()` 此方法决定是否根据模型(`TableModel`...

    网页table固定表头示例

    在网页设计中,数据展示经常使用到表格(Table),尤其是数据量大时,为了方便用户浏览,固定表头成为一种常见的需求。固定表头可以使用户在滚动页面时始终保持表头可见,以便清楚地知道每一列对应的数据含义。本文...

    网页图片把表格撑破解决办法-dw中图片把网页撑破解决方法

    2. **CSS样式设置不当**:如未对包含图片的元素应用合适的`width`、`height`属性,或者`overflow`、`display`属性设置不正确,也会导致布局混乱。 3. **响应式设计缺失**:在移动设备和不同屏幕尺寸下,如果图片没有...

    2016年度最全整理浏览器兼容性问题与解决方案

    解决办法是设置`overflow:hidden;`或调整`line-height`小于设置的高度,如`.smallHeightDiv {height: 10px; overflow: hidden;}`或`.smallHeightDiv {line-height: 5px;}`。 问题四:行内属性标签通过`display:...

Global site tag (gtag.js) - Google Analytics