首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

如何让table在div正中间显示

2014-01-03 
怎么让table在div正中间显示本帖最后由 u011128789 于 2013-12-28 19:57:49 编辑function cre(){var row

怎么让table在div正中间显示
本帖最后由 u011128789 于 2013-12-28 19:57:49 编辑 function cre(){
    var row = $("row").value;
    var cel= $("cell").value;
        for(var i = 0;i<row;i++){
        var row1 = tbl.insertRow(i);
            for(var j=0;j<cel;j++){
              cell = row1.insertCell(j);
              cell.innerHTML = "<img src='mogu1.jpg' name='image' calss='dishu'       onclick='clickMouse(this)'/>"
     } 
   }
}


js创建的table  假设我想在一个width500px  height500px的div正中间创建  如何能保证无论创建几行几列的表格  都始终显示在div的正中间?

在div和table中加vertical-align:middle样式没有效果
[解决办法]

<div style="width:500px;height:500px;border:solid 1px #000;vertical-align:middle"><table border="1" align="center"><tr><td>1</td></tr></table></div>
<script>
var table=document.getElementsByTagName('table')[0];
table.style.marginTop=(500-table.offsetHeight)/2+'px'
</script>

[解决办法]
按你的意思,div的高度是不固定的(因为table的列无限增加),那么div加上padding-top和padding-bottom就可以解决,然后table加上margin:0 auto;
如果div的高度固定,而且table随着列的增加也不会超过div的高度,那么可以用js判断:
在js插入table后,判断父容器(div)的高及table的高,公式:
(div的高-table的高)/2=table的margin-top的值或绝对定位top的值

热点排行