2016-07-26 4 views
0

私は液体のニュースレターテンプレートのためにこのテンプレートを見つけました。 私はそれがどのように動作するのか理解できます:それは3つの 'td'を持つ100%全体のテーブルです。第1および第3の 'td'は、第2の 'td'を囲み、ブラウザウィンドウを小さくしながらその機能を見ることができます。私を混乱させるのは、2番目の 'td'の固定幅です。 これはどのように反応しますか<table>?

<html> 
 
<head> 
 
    <title>Title</title> 
 
</head> 
 
<body> 
 

 
<table width="100%"> 
 
    <tr> 
 
     \t <td bgcolor="#ff0000">&nbsp;</td> 
 
     \t <td width="600" bgcolor="#ffffff"> 
 
      
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 

 
     </td> 
 
     <td bgcolor="#ff0000">&nbsp;</td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

あなただけの他の2つの「TD年代のように、その横にそれが600PXの定義された静的な幅を持っていますが、ウィンドウが600PXよりも小さい場合、それはまた小さくなる見ることができるようにindeadあなたに水平のスクロールバーを与えます。静的な幅の定義は "非流体"ではありませんか?これはどのように作動しますか?

答えて

0

デフォルトではテーブルにはtable-layout:auto;それはなぜそれが携帯電話に調整されている。 table-layoutに設定されている場合は固定です。それは壊れるでしょう。 このリンクを確認してください table-layout

+0

ああ、これはすべての背後にあるのか分かりませんでした。私はその情報を見落としていることをちょっと恥ずかしいと感じています。教えてくれてありがとう! – Rawfish

関連する問題