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

私はあなたのコードについて知りませんが、問題ごとにこれはあなたを助けることができます。

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にいくつかの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

このように使用できます

<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 に答える