Comentario: La imagen de fondo de la tabla no se puede mostrar al 100% es un dolor de cabeza. Afortunadamente, encontré una solución en línea. Los amigos necesitados pueden referirse a él.
La siguiente situación se encontró durante el desarrollo:
(1) Si el archivo se almacena en forma de sufijo de archivo .jsp, el código es el siguiente (index.jsp):
El código es el siguiente:
<%@página contentType = text/html; Charset = UTF-8 PageEncoding = UTF-8 Language = Java %>
<
<html xmlns = http: //www.w3.org/1999/xhtml>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 />
<title> Deje que la tabla se muestre 100%</title>
</head> </p> <p> <body style = fondos:#9c9;>
<tabla cellPading = 0 cellPacing = 0 estilo = ancho: 100%; >
<tr>
<td altura = 8 ancho = 17px; > <img src = img/bg-header_l.gif width = 17 height = 8/> </td>
<td style = fondo: url (img/bg-header_c.gif) repetir-x;> </td>
<td altura = 8 ancho = 17px; > <img src = img/bg-header_r.gif width = 17 height = 8/> </td>
</tr>
</table>
</body>
</html>
Después de ejecutar el programa, el efecto que se muestra en la página se muestra en la figura a continuación:
Hay dos lugares incorrectos en este efecto:
(1) El fondo del TD en el medio no cubre todo el TD;
(2) Todo el ancho de la tabla no llena toda la pantalla.
¡Estaba desconcertado y muy deprimido! ! En el fondo, intente agregar borde = 0 a la tabla, y el efecto sigue siendo el que se muestra en la figura anterior. Cambie de 0 a 1 y encuentre que la tabla llena toda la pantalla, y el TD también está cubierto con el fondo, como se muestra en la figura a continuación, pero el borde de la tabla no es lo que quiero.
Se descubrió que el método anterior no podía resolver fundamentalmente el problema.
Luego compro los 3 TD en la tabla y descubrí que no había contenido en el segundo TD, por lo que intenté completar el contenido en el segundo TD, y el código fue el siguiente:
<tabla cellPading = 0 cellPacing = 0 estilo = ancho: 100%; >
<tr>
<td altura = 8 ancho = 17px; > <img src = img/bg-header_l.gif width = 17 height = 8/> </td>
<td style = fondo: url (img/bg-header_c.gif) repetir-x;> El segundo TD agrega contenido </td>
<td altura = 8 ancho = 17px; > <img src = img/bg-header_r.gif width = 17 height = 8/> </td>
</tr>
</table>
El efecto después de ejecutar el código está básicamente en línea con el resultado final, y el efecto de operación es el siguiente:
El siguiente es un pequeño ajuste al código, el código completo es el siguiente:
El código es el siguiente:
<%@página contentType = text/html; Charset = UTF-8 PageEncoding = UTF-8 Language = Java %>
<
<html xmlns = http: //www.w3.org/1999/xhtml>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 />
<title> Deje que la tabla se muestre 100%</title>
</ablo>
<Body style = fondo:#9c9;>
<tabla cellPading = 0 cellPacing = 0 estilo = ancho: 100%; >
<tr>
<td altura = 8 ancho = 17px; > <img src = img/bg-header_l.gif width = 17 height = 8/> </td>
<td style = fondo: url (img/bg-header_c.gif) repetir-x; Font-size: 0px;> & nbsp; </td>
<td altura = 8 ancho = 17px; > <img src = img/bg-header_r.gif width = 17 height = 8/> </td>
</tr>
</table>
</body>
</html>
El efecto final se muestra en la figura a continuación: