テーブル設定の背景画像が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 つの問題があります。
（１）中央のTDの背景がTD全体を覆っていない。
（２）表全体の幅が画面全体に収まりきらない。
全然分からなくて、すごく落ち込んでます！！背景のテーブルに 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>

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