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

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

XHTMLHTML
阅读更多
　　最近写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
踩
分享到：
| Oracle查询当前用户连接
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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:...

Magicbox
Global site tag (gtag.js) - Google Analytics