テーブルの背景画像を設定しても、100%表示できない解決方法
2022-01-28 23:51:36
開発において、以下のような状況が見受けられました。
(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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Make the table display 100%</title>
</head></p> <p><body style="background:#9C9;">
<table cellpadding="0" cellspacing="0" style="width:100%;" >
<tr>
<td height="8" width="17px;" ><img src="img/bg-header_l.gif" width="17" height="8& quot; /></td>
<td style="background:url(img/bg-header_c.gif) repeat-x;"></td>
<td height="8" width="17px;" ><img src="img/bg-header_r.gif" width="17" height="8& quot; /></td>
</tr>
</table>
</body>
</html>
プログラム実行後、ページに表示される効果は次のとおりです。
(1) 中段の td の背景が td 全体に広がっていない。
(2) テーブルの横幅全体が画面一杯にならない。
困惑しています！とても落ち込んでいます。背景のテーブルにborder="0"を追加してみましたが、やはり上記のような結果になってしまいました。私はborder="0"を追加しようとした、結果はまだ上記のようになります。
そして、再度テーブル内の3つのtdを確認したところ、2番目のtdにコンテンツがなかったので、下記のようなコードで2番目のtdにコンテンツを埋めてみました。
コピーコード
コードは以下の通りです。
<table cellpadding="0" cellspacing="0" style="width:100%;" >
<tr>
<td height="8" width="17px;" ><img src="img/bg-header_l.gif" width="17" height="8& quot; /></td>
<td style="background:url(img/bg-header_c.gif) repeat-x;">Second td added content</td>
<td height="8" width="17px;" ><img src="img/bg-header_r.gif" width="17" height="8& quot; /></td>
</tr>
</table>
コードを実行した後の結果は、基本的に最終的な結果と一致し、以下のように実行されます。
コピーコード
コードは以下の通りです。
<%@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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Make the table display 100%</title>
</head>
<body style="background:#9C9;">
<table cellpadding="0" cellspacing="0" style="width:100%;" >
<tr>
<td height="8" width="17px;" ><img src="img/bg-header_l.gif" width="17" height="8& quot; /></td>
<td style="background:url(img/bg-header_c.gif) repeat-x; font-size:0px;"> </td>
<td height="8" width="17px;" ><img src="img/bg-header_r.gif" width="17" height="8& quot; /></td>
</tr>
</table>
</body>
</html>
最終的には、以下の画像のようになります。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン