我有一个动态生成的 div。我必须在其上添加一个动态生成的 HTML 表。
问题是当我添加表格时,它显示为左对齐。但是 div 对于文本内容是居中对齐的。
假设您将表格作为固定宽度元素,您可以将 margin-left/right 设置为 auto 以在其容器中居中块元素。(这里小提琴:http: //jsfiddle.net/SWakJ/)
HTML
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
您可以尝试在外部 div 中添加一些 CSS。
我实际上在这里写了一个类似的答案: 将此 div 放在它的容器的中心?
提供您的代码或只是快速查看您的代码并检查它。在表格上方放置一个 div 并设置 text-align=center。或者,如果您的表格位于任何 td 中,则分配 text-align:center。
您也可以在其之间放置标签和放置表格。
如果您只想将表格列居中而不是提供 text-align:center
我不知道您的代码,但根据问题,这可以帮助您。
function makeTable() {
row=new Array();
cell=new Array();
row_num=12; //edit this value to suit
cell_num=12; //edit this value to suit
tab=document.createElement('table');
tab.setAttribute('id','newtable');
tbo=document.createElement('tbody');
for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode((c+1)*(k+1))
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
您可以通过 CSS 设置对齐方式,如下所示:
#newtable{
border:2px solid #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
margin:auto;
}
#newtable td{
width:50px;
line-height:50px;
border:1px solid #000;
text-align:center;
}
或查看此链接“ http://www.webmasterworld.com/javascript/3614377.htm ”
你可以这样使用
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
#div1
{
width:500px;
text-align:center;
}
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
#tab td
{
/* width: 200px;
text-align:center;*/
}
运行演示Jsfiddle