2009-06-03 1 views
2

基本的には、ボックスのグリッドを作ることができます。ここでは、各ボックスの上部中央と下部にテキストを揃えることができます。その行の別のボックスのテキストがプッシュダウンするとサイズを変更します。流体テーブルの行を使ってXHTMLの "テーブル"を作る方法

このHTML 4コードを見れば、私はできることが達成されますが、IDはXHTML 1.0のdoctypeでこれを実現できるようです。

<style type="text/css"> 
<!-- 
#apDiv1 { 
     width:200px; 
     height:100%; 
      border:1px solid #000; 
} 

#apDiv1 table{ 
     width:200px; 
     height:100%; 
      border:1px solid #000; 
} 
--> 
</style> 
<div id="apDiv1"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td> 
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr><td height="100%">blah</td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    <td> 
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr> 
     <td height="100%"><p>blahfhfh</p> 
      <p>dfhdf</p> 
      <p>h</p> 
      <p>dfh</p> 
      <p>df</p> 
      <p>h</p> 
<p>&nbsp;</p></td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    <td> 
     <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr><td height="100%">blah</td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%"><p>blahfhfh</p> 
      <p>dfhdf   </p> 
      <p>&nbsp;</p></td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    </tr> 
    <tr> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    </tr> 
</table> 
</div> 
+0

あなたの問題はXHTMLにはまったく関連していません。これはQuirksモードとStandardsモードと(X)HTML Strict vs(X)HTML Transitionalの2つです。 – Kornel

答えて

0

まず、あなたの文書を作成することはhttp://validator.w3.org

、その後使用して、HTML 4.01厳しいのDOCTYPEを持っており、それが最初に検証します、あなたは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

、その後、再にDOCTYPEを変更することができますそれを検証する。違うふうに問題がある場合は、ここで具体的な質問をすることができます。

+0

高さが設定されているため、ここに掲載されたコードは検証されません。 – voyager

1

a cross-browser way to achieve grid using CSSにはdisplay:inline-blockがありますが、それはあなたが望むほど柔軟ではないかもしれません(そして、Firefox 2をサポートしたい場合、コードはかなり醜いです)。

「XHTML」の問題点は、IE5のバグをエミュレートしていないCSS(DOCTYPEを使用していないか古い/不完全なものを使用している場合)がheight:100%を使用できるときに制限されることです。

親要素の高さがautoの場合、高さのパーセント値は機能せず、デフォルトではほとんどすべてのHTML要素に自動高さが設定されています。

関連する問題