0

我有一个动态生成的 div。我必须在其上添加一个动态生成的 HTML 表。

问题是当我添加表格时,它显示为左对齐。但是 div 对于文本内容是居中对齐的。

4

5 回答 5

4

假设您将表格作为固定宽度元素,您可以将 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;
}
于 2013-03-13T05:09:26.080 回答
0

您可以尝试在外部 div 中添加一些 CSS。

我实际上在这里写了一个类似的答案: 将此 div 放在它的容器的中心?

于 2013-03-13T05:10:01.743 回答
0

提供您的代码或只是快速查看您的代码并检查它。在表格上方放置一个 div 并设置 text-align=center。或者,如果您的表格位于任何 td 中,则分配 text-align:center。

您也可以在其之间放置标签和放置表格。

如果您只想将表格列居中而不是提供 text-align:center

于 2013-03-13T05:10:10.417 回答
0

我不知道您的代码,但根据问题,这可以帮助您。

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

于 2013-03-13T05:13:17.277 回答
0

你可以这样使用

<div id="div1">
 <table id="tab">
    <tr>
        <td>test</td>
    </tr>
 </table>
</div>

CSS

 #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

于 2013-03-13T05:14:27.573 回答