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

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:44 AM

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。