tableのheight(高さ・縦)を100%にする HTML 知識Z(ゼータ)

トップページHTML >tableのheight(高さ・縦)を100%にする

tableのheight(高さ・縦)を100%にする

Date:2010/12/04
Category: HTML


CMSなどを使用していて、横並びのテーブルをテンプレートとして作成したい場合に、

<table border="1"> <tr><td> <table border="1" height="100%"> <tr> <td>1行</td> </tr> </table> </td> <td> <table border="1" height="100%"> <tr> <td>2行<br />2行</td> </tr> </table> </td> </tr> </table>
のように縦を100%にしてもうまく揃えることができないないときがあります。 (下図)
1行
2行
2行
解消するにはどうすればよいでしょうか。

これは、親要素に対して、100%指定をしなかったためで、

<table border="1" height="100%"> <tr><td> <table border="1" height="100%"> <tr> <td>1行</td> </tr> </table> </td> <td> <table border="1" height="100%"> <tr> <td>2行<br />2行</td> </tr> </table> </td> </tr> </table>
とすることで、子要素のtableに指定したheight100%が反映されるようになります。 (下図)
1行
2行
2行


tableのheight (高さ・縦) を100%にする の関連記事

No related items.

コメント

No comments yet

コメントする




次項 【HTML】複数のクラスをつける
前項 【HTML】改行による空白(スペース)を除去する方法

知識Z(ゼータ)トップへ
モッピー | お金がたまるポイントサイト
About Us

知識Z(ゼータ)は違法性のあるコンテンツ、不適切な表現の含まれるコンテンツを一切を排除した安心安全な総合優良コンテンツサイトを目指しています。細心の注意を払っておりますが、万が一、不適切なコンテンツ等がございましたら、ご一報ください。ご意見・ご連絡

当サイトは、月額1,050円で高機能・安心レンタルサーバーの【XSERVER(エックスサーバー) 】にて運営させていただいております。いつも大変ありがとうございます。

Calendar
<   2010-12   >
   1234
567891011
12131415161718
19202122232425
262728293031 

Amazon.co.jp
What's New
タグ
オンラインデータ
訪問者数:0 人
投稿記事数:286 件
18934951