Das Hintergrundbild der Tabelleneinstellung kann nicht zu 100 % angezeigt werden. Lösung

Das Hintergrundbild der Tabelleneinstellung kann nicht zu 100 % angezeigt werden. Lösung

Während der Entwicklung wurden die folgenden Situationen festgestellt:
(1) Wenn die Datei mit der Dateiendung .jsp gespeichert ist, lautet der Code wie folgt (index.jsp):

Code kopieren
Der Code lautet wie folgt:

<%@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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Tabelle zu 100 % sichtbar machen</title>
</head></p> <p><body style="background:#9C9;">
<table cellpadding="0" cellspacing="0" style="width:100%;" >
<tr>
<td Höhe="8" Breite="17px;" ><img src="img/bg-header_l.gif" Breite="17" Höhe="8" /></td>
<td style="Hintergrund:url(img/bg-header_c.gif) repeat-x;"></td>
<td Höhe="8" Breite="17px;" ><img src="img/bg-header_r.gif" Breite="17" Höhe="8" /></td>
</tr>
</Tabelle>
</body>
</html>

Nachdem das Programm ausgeführt wurde, wird auf der Seite der folgende Effekt angezeigt:

An diesem Effekt sind zwei Dinge falsch:
(1) Der Hintergrund des mittleren TD deckt nicht den gesamten TD ab.
(2) Die gesamte Tabellenbreite füllt nicht den gesamten Bildschirm aus.
Ich komme nicht dahinter und bin sehr deprimiert! ! Versuchen Sie, der Tabelle im Hintergrund border="0" hinzuzufügen. Der Effekt ist immer noch wie in der Abbildung oben gezeigt. Nachdem ich 0 in 1 geändert hatte, stellte ich fest, dass die Tabelle den gesamten Bildschirm ausfüllte und das td auch vom Hintergrund verdeckt wurde, wie unten gezeigt, aber der Rand der Tabelle ist nicht das, was ich wollte.

Es zeigt sich, dass die oben genannten Methoden das Problem nicht grundsätzlich lösen können.
Dann habe ich die drei td in der Tabelle überprüft und festgestellt, dass im zweiten td kein Inhalt vorhanden war. Also habe ich versucht, den zweiten td auszufüllen. Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<table cellpadding="0" cellspacing="0" style="width:100%;" >
<tr>
<td Höhe="8" Breite="17px;" ><img src="img/bg-header_l.gif" Breite="17" Höhe="8" /></td>
<td style="background:url(img/bg-header_c.gif) repeat-x;">Inhalt zum zweiten td hinzufügen</td>
<td Höhe="8" Breite="17px;" ><img src="img/bg-header_r.gif" Breite="17" Höhe="8" /></td>
</tr>
</Tabelle>

Der Effekt nach dem Ausführen des Codes stimmt grundsätzlich mit dem Endergebnis überein. Der Laufeffekt ist wie folgt:

Passen wir den Code leicht an. Der vollständige Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<%@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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Tabelle zu 100 % sichtbar machen</title>
</Kopf>
<body style="Hintergrund:#9C9;">
<table cellpadding="0" cellspacing="0" style="width:100%;" >
<tr>
<td Höhe="8" Breite="17px;" ><img src="img/bg-header_l.gif" Breite="17" Höhe="8" /></td>
<td style="background:url(img/bg-header_c.gif) repeat-x; font-size:0px;">&nbsp;</td>
<td Höhe="8" Breite="17px;" ><img src="img/bg-header_r.gif" Breite="17" Höhe="8" /></td>
</tr>
</Tabelle>
</body>
</html>

Der endgültige Effekt ist in der folgenden Abbildung dargestellt:




<<:  TypeScript-Problem beim Iterieren über Objekteigenschaften

>>:  CSS realisiert die Szenenanalyse von halbtransparenten Rändern und Mehrfachrändern

Artikel empfehlen

Lösung für falsche Zeichenfolgenwerte in MySQL

Viele Freunde berichten von folgendem Fehler, wen...

Vier Möglichkeiten, CSS und HTML zu kombinieren

(1) Jedes HTML-Tag hat ein Attribut style, das CS...

Diagramm der Konfigurationsmethode für die installationsfreie Version von MySQL5.6 für Windows Server 2008 64-Bit

1 Laden Sie das komprimierte Paket der MySQL 5.6-...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.19

In diesem Artikel wird das grafische Tutorial zur...

Bei verschachtelten MySQL-Transaktionen aufgetretene Probleme

MySQL unterstützt verschachtelte Transaktionen, a...

Methoden und Techniken zur Gestaltung einer interessanten Website (Bild)

Haben Sie schon einmal eine Situation erlebt, in d...

So extrahieren Sie Zeichenfolgenelemente aus nicht festen Positionen in MySQL

Vorwort Hinweis: Die Testdatenbankversion ist MyS...

Elegante praktische Aufzeichnung der Einführung der Iconfont-Symbolbibliothek in Vue

Inhaltsverzeichnis Vorwort SVG generieren Einführ...

Detaillierte Erläuterung zur Verwendung von Docker zum Erstellen einer einfachen Java-Entwicklungs- und Kompilierungsumgebung

Es gibt viele Versionen der Java-Sprache. Zusätzl...

Lösung für das Problem, dass Docker CMD/ENTRYPOINT das sh-Skript ausführt: nicht gefunden/run.sh:

Es gibt kein Problem mit der Dockerfile-Konfigura...

Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL

1. Hintergrund In tatsächlichen Projekten stoßen ...

Docker verwendet Busybox, um ein Basis-Image zu erstellen

Die erste Zeile eines Docker-Images beginnt mit e...

Tutorial zur Verwendung von Webpack in JavaScript

Inhaltsverzeichnis 0. Was ist Webpack 1. Einsatz ...

MySQL-Benutzer und -Berechtigungen und Beispiele zum Knacken des Root-Passworts

MySQL-Benutzer und -Berechtigungen In MySQL gibt ...

Unverzichtbares Wissen für Vorstellungsgespräche und schriftliche Tests im Bereich Webentwicklung (Pflichtlektüre)

Der Unterschied zwischen Inline-Elementen und Blo...