Commentaire: L'image d'arrière-plan de la table ne peut pas être affichée à 100% est un mal de tête. Heureusement, j'ai trouvé une solution en ligne. Les amis dans le besoin peuvent y faire référence.
La situation suivante a été trouvée pendant le développement:
(1) Si le fichier est stocké sous la forme d'un suffixe de fichier .jsp, le code est le suivant (index.jsp):
Le code est le suivant:
<% @ 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>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 />
<Title> Laissez la table s'afficher à 100% </TITME>
</ head> </p> <p> <style corporel = arrière-plan: # 9c9;>
<Table CELLPADING = 0 CELLPACING = 0 Style = Largeur: 100%; >
<tr>
<hauteur td = 8 largeur = 17px; > <img src = img / bg-header_l.gif width = 17 height = 8 /> </td>
<td style = arrière-plan: url (img / bg-header_c.gif) répéter-x;> </td>
<hauteur td = 8 largeur = 17px; > <img src = img / bg-header_r.gif width = 17 height = 8 /> </td>
</tr>
</ table>
</docy>
</html>
Une fois le programme exécuté, l'effet affiché sur la page est illustré dans la figure ci-dessous:
Il y a deux mauvais endroits dans cet effet:
(1) L'arrière-plan du TD au milieu ne couvre pas l'ensemble du TD;
(2) Toute la largeur du tableau ne remplit pas tout l'écran.
J'étais perplexe et très déprimé! ! En arrière-plan, essayez d'ajouter une bordure = 0 au tableau, et l'effet est toujours comme indiqué dans la figure ci-dessus. Changez 0 à 1 et trouvez que le tableau remplit l'écran entier, et le TD est également recouvert de l'arrière-plan, comme indiqué sur la figure ci-dessous, mais la bordure de la table n'est pas ce que je veux.
Il a été constaté que la méthode ci-dessus ne pouvait pas résoudre fondamentalement le problème.
Ensuite, j'ai comparé les 3 TD dans le tableau et j'ai constaté qu'il n'y avait pas de contenu dans le deuxième TD, j'ai donc essayé de remplir le contenu dans le deuxième TD, et le code était le suivant:
<Table CELLPADING = 0 CELLPACING = 0 Style = Largeur: 100%; >
<tr>
<hauteur td = 8 largeur = 17px; > <img src = img / bg-header_l.gif width = 17 height = 8 /> </td>
<td style = background: url (img / bg-header_c.gif) repeat-x;> le deuxième td ajoute du contenu </td>
<hauteur td = 8 largeur = 17px; > <img src = img / bg-header_r.gif width = 17 height = 8 /> </td>
</tr>
</ table>
L'effet après l'exécution du code est essentiellement conforme au résultat final, et l'effet de fonctionnement est le suivant:
Ce qui suit est un petit ajustement au code, le code complet est le suivant:
Le code est le suivant:
<% @ 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>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 />
<Title> Laissez la table s'afficher à 100% </TITME>
</ head>
<Style du corps = arrière-plan: # 9C9;>
<Table CELLPADING = 0 CELLPACING = 0 Style = Largeur: 100%; >
<tr>
<hauteur td = 8 largeur = 17px; > <img src = img / bg-header_l.gif width = 17 height = 8 /> </td>
<TD Style = Background: URL (img / bg-header_c.gif) répéter-x; taille de police: 0px;> & nbsp; </td>
<hauteur td = 8 largeur = 17px; > <img src = img / bg-header_r.gif width = 17 height = 8 /> </td>
</tr>
</ table>
</docy>
</html>
L'effet final est illustré dans la figure ci-dessous: