テーブル設定の背景画像が100%表示されない解決策

テーブル設定の背景画像が100%表示されない解決策

開発中に以下の状況が発見されました。
(1) ファイルが.jspファイル拡張子で保存されている場合、コードは次のようになります(index.jsp)。

コードをコピー
コードは次のとおりです。

<%@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>

プログラムを実行すると、ページに表示される効果は次のようになります。

この効果には 2 つの問題があります。
(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;">&nbsp;</td>
<td 高さ="8" 幅="17px;" ><img src="img/bg-header_r.gif" 幅="17" 高さ="8" /></td>
</tr>
</テーブル>
</本文>
</html>

最終的な効果は以下の図に示されています。




<<:  オブジェクトのプロパティを反復処理する際の TypeScript の問題

>>:  CSSは半透明の境界と複数の境界のシーン分析を実現します

推薦する

CSSはBEM命名規則の実践を使用する

クラスを見るとき、どのような情報を得たいですか?このクラスはどこで使用され、その機能は何ですか?この...

実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

準備: 192.168.16.128 192.168.16.129 2 台の仮想マシン。 Nginx...

Vueはファイルのアップロードとダウンロード機能を実装します

この記事では、ファイルのアップロードとダウンロード機能を実装するためのVueの具体的なコードを例とし...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

jsは配列の平坦化を実装します

目次配列をフラット化する方法1.flat() の使用2. 正規表現を使用する3.reduce()+c...

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

下線を実現するための CSS3 トランジションの例コード

この記事では、下線を実現するための CSS3 トランジションのサンプル コードを紹介します。このコー...

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...

Flash が HTML div 要素を覆わないようにする方法

今日、フラッシュ広告のコードを書いていたとき、フラッシュに付属するリンクはポップアップ広告と間違われ...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

MySQLはフィールドからカンマ区切りの値を取り出して新しいフィールドを形成します

1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

ページ要素の絶対位置と相対位置に関するある程度の理解

今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...

springcloud alibaba nacos linux 設定の詳細なチュートリアル

まず、github から nacos の圧縮パッケージをダウンロードします: https://git...