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

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

WBOY

リリース： 2016-06-21 09:44:24

オリジナル

1711 人が閲覧しました

表格嵌套 100%高度

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