開発中に以下の状況が発見されました。 コードをコピー コードは次のとおりです。<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" %> <!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"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>テーブルを 100% 表示する</title> </head></p> <p><body style="background:#9C9;"> <テーブル セルパディング="0" セル間隔="0" スタイル="幅:100%;" > <tr> <td 高さ="8" 幅="17px;" ><img src="img/bg-header_l.gif" 幅="17" 高さ="8" /></td> <td style="background:url(img/bg-header_c.gif) repeat-x;"></td> <td 高さ="8" 幅="17px;" ><img src="img/bg-header_r.gif" 幅="17" 高さ="8" /></td> </tr> </テーブル> </本文> </html> プログラムを実行すると、ページに表示される効果は次のようになります。 (1)中央のTDの背景がTD全体を覆っていない。 (2)表全体の幅が画面全体に収まりきらない。 全然分からなくて、すごく落ち込んでます! !背景のテーブルに border="0" を追加してみてください。効果は上の図のようになります。 0 を 1 に変更した後、以下に示すように、テーブルが画面全体を占め、td も背景に覆われていることがわかりましたが、テーブルの境界線は私が望むものではありません。 次に、テーブル内の 3 つの td を確認したところ、2 番目の td にコンテンツがなかったため、2 番目の td に入力してみました。コードは次のとおりです。 コードをコピー コードは次のとおりです。<テーブル セルパディング="0" セル間隔="0" スタイル="幅:100%;" > <tr> <td 高さ="8" 幅="17px;" ><img src="img/bg-header_l.gif" 幅="17" 高さ="8" /></td> <td style="background:url(img/bg-header_c.gif) repeat-x;">2 番目の td にコンテンツを追加します</td> <td 高さ="8" 幅="17px;" ><img src="img/bg-header_r.gif" 幅="17" 高さ="8" /></td> </tr> </テーブル> コードを実行した後の効果は、基本的に最終結果と一致します。実行効果は次のとおりです。 コードをコピー コードは次のとおりです。<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" %> <!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"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>テーブルを 100% 表示する</title> </head> <body style="background:#9C9;"> <テーブル セルパディング="0" セル間隔="0" スタイル="幅:100%;" > <tr> <td 高さ="8" 幅="17px;" ><img src="img/bg-header_l.gif" 幅="17" 高さ="8" /></td> <td style="background:url(img/bg-header_c.gif) repeat-x; font-size:0px;"> </td> <td 高さ="8" 幅="17px;" ><img src="img/bg-header_r.gif" 幅="17" 高さ="8" /></td> </tr> </テーブル> </本文> </html> 最終的な効果は以下の図に示されています。 |
<<: オブジェクトのプロパティを反復処理する際の TypeScript の問題
>>: CSSは半透明の境界と複数の境界のシーン分析を実現します
クラスを見るとき、どのような情報を得たいですか?このクラスはどこで使用され、その機能は何ですか?この...
準備: 192.168.16.128 192.168.16.129 2 台の仮想マシン。 Nginx...
この記事では、ファイルのアップロードとダウンロード機能を実装するためのVueの具体的なコードを例とし...
——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...
コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...
目次配列をフラット化する方法1.flat() の使用2. 正規表現を使用する3.reduce()+c...
展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...
この記事では、下線を実現するための CSS3 トランジションのサンプル コードを紹介します。このコー...
1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...
今日、フラッシュ広告のコードを書いていたとき、フラッシュに付属するリンクはポップアップ広告と間違われ...
最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...
1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...
具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...
今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...
まず、github から nacos の圧縮パッケージをダウンロードします: https://git...