テーブルは画面中央に配置され、画面上で反応します

Question

私はモバイルアプリで作業しています。だから私は応答し、幅と高さにデバイスを合わせる必要があります。私は私の目標を取得する画像や表でどのように機能するかを知らない

これが私の目標

あるしかし、これは私がCSSコードで得るものです

#tablebot{ 

position: absolute; 
margin: auto; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
width: 100%; 
height: auto; 

} 

私のHTMLはこれです

<table id="tablebot"> 
<tr><td>..img..</td><td>..img</td></tr> 
<tr><td>..img..</td><td>..img</td></tr> 
<tr><td>..img..</td><td>..img</td></tr> 
<tr><td>..img..</td><td>..img</td></tr> 
</table> 

IMGは幅SRC = 100％で

、高さ=オート

Iは、デバイスの画面に応じた各セルにIMGとテーブルを必要は

を中心私は垂直alingと

を試しありがとう!!

Answer 1

テーブルをコンテナdivに挿入してから、margin: 0 autoとするだけです。コードでは、私はちょうどそれが働いていることを確認するために、90％ではなく100％にテーブル幅を再調整切り取ら：

#tablebot{ 
 

 
position: absolute; 
 
margin: auto; 
 
top: 0; 
 
right: 0; 
 
bottom: 0; 
 
left: 0; 
 
width: 90%; 
 
height: auto; 
 

 
} 
 

 
img { 
 
    width:100%; 
 
    height: auto; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
}

<div class="container"> 
 
    <table id="tablebot"> 
 
    <tr><td><img src="https://unsplash.it/200" alt=""> </td><td><img src="https://unsplash.it/200" alt=""></td></tr> 
 
    <tr><td><img src="https://unsplash.it/200" alt=""></td><td><img src="https://unsplash.it/200" alt=""></td></tr> 
 
    <tr><td><img src="https://unsplash.it/200" alt=""></td><td><img src="https://unsplash.it/200" alt=""></td></tr> 
 
    <tr><td><img src="https://unsplash.it/200" alt=""></td><td><img src="https://unsplash.it/200" alt=""></td></tr> 
 
    </table> 
 
    
 
</div>