2017-10-17 25 views
0

この種のデザイン/構造を複製しようとしています: 注意テーブルの片側の2つのボックスともう一方の大きなボックスの下に! enter image description here テーブルCSSを使用してこれをどのように達成できますか?ここでは垂直に積層された私の現在のコードは、です:cssテーブル要素を水平に整列する方法は?

<body> 

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> 
<tr> 
    <td align="center" valign="top"> 
     <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer"> 
      <tr> 
       <td align="center" valign="top"> 
        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader"> 
         <tr> 
          <td align="center" valign="top"> 
           This is where my body content goes. 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td align="center" valign="top"> 
        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody"> 
         <tr> 
          <td align="center" valign="top"> 
           This is where my body content goes. 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td align="center" valign="top"> 
        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter"> 
         <tr> 
          <td align="center" valign="top"> 
           This is where my body content goes. 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr> 
</table> 

</body> 

任意のアイデア?:

+0

私の答えを見てください!最善を尽くした! –

+0

フレックスデザインを使用してください。かなり少ないコードで必要な処理を行います。 – jfeferman

+0

あなたはそれが良いと思ったら私の答えを受け入れることができますか? –

答えて

1

スティーブンはtheoryで、権利である:

CSSを使用してテーブルを中央に「正しい」方法。適合するブラウザは、左右のマージンが等しい場合にテーブルを中央に置くべきです。これを実現する最も簡単な方法は、左右の余白を設定することでこのように、一つはスタイルシートに書くかもしれない「オート」:

table 
{ 
    margin-left: auto; 
    margin-right: auto; 
} 

しかし、この答えの冒頭で言及した記事はあなたを与えますテーブルを中央に置くために他のすべての方法。

エレガントなCSSのクロスブラウザのソリューション: これは、明示的な幅を設定せずにMSIE 6(癖や規格)、Mozillaの、オペラ、さらにはネットスケープ4.xの両方で動作します:

div.centered 
{ 
    text-align: center; 
} 

    div.centered table 
{ 
    margin: 0 auto; 
    text-align: left; 
} 


    <div class="centered"> 
    <table> 
    … 
    </table> 
</div> 

このpostを参照してください。

編集これは水平です。ちょうどnecicceryのCSSを変更するか、hereを参照してください!

+0

なぜ大胆なテキストで私たちに叫んでいますか? – FluffyKitten

+0

イム。申し訳ありませんが太っているが、それを目立たせることだった –

関連する問題