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

Detailliertes Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Centos7

1. Laden Sie das MySQL 5.7-Installationspaket von...

Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click

Inhaltsverzeichnis Warum wird addEventListener be...

JS realisiert einfachen Bildkarusselleffekt

In diesem Artikel wird der spezifische JS-Code zu...

Beispiel für die Anpassung von rem an mobile Geräte

Vorwort Überprüfung und Zusammenfassung von REM-A...

Einige Möglichkeiten zum Eliminieren doppelter Zeilen in MySQL

SQL-Anweisung /* Einige Methoden zum Eliminieren ...

Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images

Inhaltsverzeichnis 1. Workflow ausführen 2. Grund...

Tutorial zum Herunterladen, Installieren und Bereitstellen von Tomcat für IDEA (mit zwei Hot-Deployment-Einstellungsmethoden für IDEA)

Inhaltsverzeichnis Tomcat-Download-Tutorial Tutor...

VMware-Konfiguration von Hadoop zur Realisierung eines pseudoverteilten Grafik-Tutorials

1. Experimentelle Umgebung Seriennummer Projekt S...

Vue imitiert den Formularbeispielcode von ElementUI

Implementierungsanforderungen Das ElementUI imiti...

Vue implementiert eine einfache Produktion von Zählern

In diesem Artikelbeispiel wird der einfache Imple...

So erstellen Sie SonarQube mit Docker

Inhaltsverzeichnis 1. Docker installieren 2. Sona...

Warum ist der MySQL-Autoinkrement-Primärschlüssel nicht kontinuierlich?

Inhaltsverzeichnis 1. Einleitung 2. Beschreibung ...

Implementierung der gemeinsamen Nutzung von Daten zwischen Docker Volume-Containern

Was ist Volumen? „Volume“ bedeutet auf Englisch K...

Eine detaillierte Einführung in die Bereitstellung einer RabbitMQ-Umgebung mit Docker

Voraussetzungen: Docker ist bereits installiert 1...

Lösung für SQL Server-Datenbankfehler 5123

Weil ich ein Datenbank-Tutorial habe, das auf SQL...