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样式没有效果
13 个解决方案
#1
table加align="center"属性就行了吧。垂直居中设置div的vertical没效果，一定要垂直居中，需要动态计算table的高度和div的剩余高度，设置下table的margin-top来居中
#2
<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>
#3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery/jquery-1.9.1.js"></script>
<style>
#container {
width:550px;
height:500px;
border:1px solid #321;
}
</style>
</head>
<body>
<div id='container'>
<table width="400" border="1" id="buzhidao" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
<td>a6</td>
<td>a7</td>
<td>a8</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
<td>b5</td>
<td>b6</td>
<td>b7</td>
<td>b8</td>
</tr>
</table>
</div>
<script>
var $c = $("#container");
var $ch = $c.height();
var $cw = $c.width();
var $b = $("#buzhidao");
var $bh = $b.height();
var $bw = $b.width();
$c.css({position:'relative'});
$b.css({
position:'absolute',
left:($cw/2-$bw/2)+'px',
top:($ch/2-$bh/2)+'px'
});
</script>
</body>
</html>
#4
按你的意思，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的值
如果div的高度固定，而且table随着列的增加也不会超过div的高度，那么可以用js判断：
在js插入table后，判断父容器（div）的高及table的高，公式：
（div的高-table的高）/2=table的margin-top的值或绝对定位top的值
#5
你创建table的时候带上一个样式 然后定义一下样式居中不就行了？
#6
<div style="width:500px;height:500px;border:1px solid;">
<div style="width:400px;height:400px;margin:50px;background: silver;overflow: auto">
<table>
.....
</table>
</div>
</div>
#7
创建完表格后获得表格的计算样式后用定位试试
#8
设置div的文本对齐方式为居中，顶端对齐方式也是居中。
text-align:center
vertical-align:middle
text-align:center
vertical-align:middle
#9
margin:0 auto;加padding-right那些
#10
div的高度我直接固定的 但是随机生成的table的高度我要如何获取？
#11
那你就一定要用div
不能换成table吗？
table里面的东西不是直接可以 居中
不能换成table吗？
table里面的东西不是直接可以 居中
#12
我那高度是随机的。
#13
抱歉，这两天没关注你的问题，谢谢你给了分！
jquery获取元素的高度很方便，你查看jquery手册便知！
如果没能解决，请联系我！
#1
table加align="center"属性就行了吧。垂直居中设置div的vertical没效果，一定要垂直居中，需要动态计算table的高度和div的剩余高度，设置下table的margin-top来居中
#2
<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>
#3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery/jquery-1.9.1.js"></script>
<style>
#container {
width:550px;
height:500px;
border:1px solid #321;
}
</style>
</head>
<body>
<div id='container'>
<table width="400" border="1" id="buzhidao" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
<td>a6</td>
<td>a7</td>
<td>a8</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
<td>b5</td>
<td>b6</td>
<td>b7</td>
<td>b8</td>
</tr>
</table>
</div>
<script>
var $c = $("#container");
var $ch = $c.height();
var $cw = $c.width();
var $b = $("#buzhidao");
var $bh = $b.height();
var $bw = $b.width();
$c.css({position:'relative'});
$b.css({
position:'absolute',
left:($cw/2-$bw/2)+'px',
top:($ch/2-$bh/2)+'px'
});
</script>
</body>
</html>
#4
按你的意思，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的值
如果div的高度固定，而且table随着列的增加也不会超过div的高度，那么可以用js判断：
在js插入table后，判断父容器（div）的高及table的高，公式：
（div的高-table的高）/2=table的margin-top的值或绝对定位top的值
#5
你创建table的时候带上一个样式 然后定义一下样式居中不就行了？
#6
<div style="width:500px;height:500px;border:1px solid;">
<div style="width:400px;height:400px;margin:50px;background: silver;overflow: auto">
<table>
.....
</table>
</div>
</div>
#7
创建完表格后获得表格的计算样式后用定位试试
#8
设置div的文本对齐方式为居中，顶端对齐方式也是居中。
text-align:center
vertical-align:middle
text-align:center
vertical-align:middle
#9
margin:0 auto;加padding-right那些
#10
div的高度我直接固定的 但是随机生成的table的高度我要如何获取？
#11
那你就一定要用div
不能换成table吗？
table里面的东西不是直接可以 居中
不能换成table吗？
table里面的东西不是直接可以 居中
#12
我那高度是随机的。
#13
抱歉，这两天没关注你的问题，谢谢你给了分！
jquery获取元素的高度很方便，你查看jquery手册便知！
如果没能解决，请联系我！