開発中に以下の状況が発見されました。 コードをコピー コードは次のとおりです。<%@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は半透明の境界と複数の境界のシーン分析を実現します
1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...
目次1. ジョイントインデックスの故障の条件2. インデックス失敗の条件1. ジョイントインデックス...
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...
1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...
目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...
1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...
Linux コマンドの学習は、ほとんどの初心者にとって最大の障害です。今日は、Linux システムで...
この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...
目次I. 概要2. pt-archiverの主なパラメータ3. mysql_archiverのインス...
序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...
ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...
公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...
もう2020年です。飢えた人間は単純なテキストでは満足できなくなり、さまざまなスタイルの派手なテキス...
インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...