ネストされたテーブルの高さを 100% にする方法_html/css_WEB-ITnose

表格嵌套  100%高度

ee6b9b6dce00ec05ede84203bb5ef994
0248ab35bc89717fe90fb05d253c4337
    a34de1251f0d9fe1e645927f19a896e8
        47ea218fc9d2a79aadcfac654bf89c78 b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
    fd273fcf5bcad3dfdad3c41bd81ad3e5
    a34de1251f0d9fe1e645927f19a896e8
        b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c
        
            88ca89ce220ff672c3699f5c883225ca
                a34de1251f0d9fe1e645927f19a896e8
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                fd273fcf5bcad3dfdad3c41bd81ad3e5
                a34de1251f0d9fe1e645927f19a896e8
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                fd273fcf5bcad3dfdad3c41bd81ad3e5
                a34de1251f0d9fe1e645927f19a896e8
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
                fd273fcf5bcad3dfdad3c41bd81ad3e5
            f16b1740fad44fb09bfe928bcc527e08
                    
        b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
    fd273fcf5bcad3dfdad3c41bd81ad3e5
    a34de1251f0d9fe1e645927f19a896e8
        0753a70c5260d752a4db0bbf0d939f68 b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
    fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68

table2 の高さは 100% 無効です
高さを 100% にするにはどうすればよいですか?

ディスカッションへの返信 (解決策)

独自のマージンとパディングを削除してから

を使用してください

独自のマージンとパディングを削除してから
を使用してください
それは本当のようです、上記のコードを追加してください 良いスタイルは に追加されています可能であれば、すべてを共有します

border-collspace:collspace; これは使いにくいですか?

これがあなたが望む結果かどうかを確認してください

<div style=" width:500px; height:400px;"><table id="table1" >    <tr>        <td style="height:120px;"> </td>        <td> </td>        <td> </td>    </tr>    <tr>        <td> </td>        <td class="detail">                    <table id="table2" >                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>            </table>                            </td>        <td> </td>    </tr>    <tr>        <td style="height:20px;"> </td>        <td> </td>        <td> </td>    </tr></table></div>

#table1 {      width:100%;    height:100%;border:3px solid gray;border-collapse:collapse;}#table1 td {border: 1px solid gray;padding:0px;}#table2 {     width:100%;    height:100%;    margin:0px;border-collapse:collapse;}#table1 .detail {border-style: hidden;}#table2 td {border: 1px outset gray;}

これがあなたにとっての結果ですか? want

<div style=" width:500px; height:400px;"><table id="table1" >    <tr>        <td style="height:120px;"> </td>        <td> </td>        <td> </td>    </tr>    <tr>        <td> </td>        <td class="detail">                    <table id="table2" >                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>            </table>                            </td>        <td> </td>    </tr>    <tr>        <td style="height:20px;"> </td>        <td> </td>        <td> </td>    </tr></table></div>

#table1 {      width:100%;    height:100%;border:3px solid gray;border-collapse:collapse;}#table1 td {border: 1px solid gray;padding:0px;}#table2 {     width:100%;    height:100%;    margin:0px;border-collapse:collapse;}#table1 .detail {border-style: hidden;}#table2 td {border: 1px outset gray;}

申し訳ありませんが、重要な点: table2 の 100% の高さはまだ機能しません

私が望むのは、table2 がセルを class="detail" で満たし、table1 の外側に配置できることです。 div の変更に応じて、table2 もそれに応じて変更できます

js/jquery を使用して連携します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title> new document </title>  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>  <script type="text/javascript">  <!--		$(function(){			var $table2 = $("#table2");			$table2.height($table2.parent().height());		})  //-->  </script> </head> <body><div style=" width:800px; height:600px;"><table id="table1" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">    <tr>        <td style="height:120px;"> </td>        <td> </td>        <td> </td>    </tr>    <tr>        <td> </td>        <td>                    <table id="table2" width="100%" border="1" cellspacing="0" cellpadding="0">                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>            </table>                            </td>        <td> </td>    </tr>    <tr>        <td style="height:20px;"> </td>        <td> </td>        <td> </td>    </tr></table></div> </body></html>

Chrome での効果

CSS の権威あるガイド、ページ p370、テーブル レイアウトの高さを確認しました。
テーブルの高さの計算は、主にユーザーエージェントの決定に委ねられます。歴史によれば、ユーザー エージェントごとに異なるプラクティスが存在する可能性が高いため、可能であれば高さの設定は避けたいと考えています。