テーブル設定の背景画像が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は半透明の境界と複数の境界のシーン分析を実現します

推薦する

MySQL の遅いクエリの最適化方法と最適化の原則

1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...

MySQL のインデックス有効条件とインデックス無効条件の結合

目次1. ジョイントインデックスの故障の条件2. インデックス失敗の条件1. ジョイントインデックス...

CentOS 7.x のマスターおよびスレーブ DNS サーバーの展開

1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...

HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題

HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...

JavaScript配列をツリー構造に変換する方法

1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...

初心者向けの一般的な Linux システムコマンドの完全なリスト

Linux コマンドの学習は、ほとんどの初心者にとって最大の障害です。今日は、Linux システムで...

MySQLは効率的なインデックス例分析を確立する

この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...

MySQL データ アーカイブ ツール mysql_archiver の詳細な説明

目次I. 概要2. pt-archiverの主なパラメータ3. mysql_archiverのインス...

Linux 面接で最もよく聞かれる 10 の質問のまとめ

序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...

HTMLのタグと要素の違いの詳細な説明

ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...

Quill エディタでカスタム HTML レコードを挿入する詳細な例

もう2020年です。飢えた人間は単純なテキストでは満足できなくなり、さまざまなスタイルの派手なテキス...

CentOS7 での mysql 5.7.23 のバイナリ インストール

インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...