動的に生成された 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;
}
私はあなたのコードについて知りませんが、問題ごとにこれはあなたを助けることができます。
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にいくつかのcssを追加しようとするかもしれません。
私は実際にここに同様の答えを書きました: このdivをコンテナの中央に配置しますか?
あなたのコードを与えるか、あなたのコードに素早く行き、これをチェックしてください。テーブルの上にdivを置き、text-align=centerを設定します。または、テーブルが任意のtdにある場合は、text-align:centerを割り当てます。
また、タグを入れてその間にテーブルを置くこともできます。
テーブル列を中央に配置するだけでなく、text-align:centerも指定する場合
このように使用できます
<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;*/
}