Comment: The background image of the table cannot be displayed 100% is a headache. Fortunately, I found a solution online. Friends in need can refer to it.
The following situation was found during development:
(1) If the file is stored in the form of a .jsp file suffix, the code is as follows (index.jsp):
The code is as follows:
<%@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>Let the table be displayed 100%</title>
</head></p> <p><body style=background:#9C9;>
<table cellpading=0 cellpacing=0 style=width:100%; >
<tr>
<td height=8 width=17px; ><img src=img/bg-header_l.gif width=17 height=8 /></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 /></td>
</tr>
</table>
</body>
</html>
After the program is run, the effect displayed on the page is shown in the figure below:
There are two wrong places in this effect:
(1) The background of the td in the middle does not cover the entire td;
(2) The entire table width does not fill the entire screen.
I was puzzled and very depressed! ! In the background, try to add border=0 to the table, and the effect is still as shown in the figure above. Change 0 to 1 and find that the table fills the entire screen, and the td is also covered with the background, as shown in the figure below, but the border of the table is not what I want.
It was found that the above method could not fundamentally solve the problem.
Then I compared the 3 tds in the table and found that there was no content in the second td, so I tried to fill in the content in the second td, and the code was as follows:
<table cellpading=0 cellpacing=0 style=width:100%; >
<tr>
<td height=8 width=17px; ><img src=img/bg-header_l.gif width=17 height=8 /></td>
<td style=background:url(img/bg-header_c.gif) repeat-x;>The second td adds content</td>
<td height=8 width=17px; ><img src=img/bg-header_r.gif width=17 height=8 /></td>
</tr>
</table>
The effect after running the code is basically in line with the final result, and the operation effect is as follows:
The following is a little adjustment to the code, the complete code is as follows:
The code is as follows:
<%@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>Let the table be displayed 100%</title>
</head>
<body style=background:#9C9;>
<table cellpading=0 cellpacing=0 style=width:100%; >
<tr>
<td height=8 width=17px; ><img src=img/bg-header_l.gif width=17 height=8 /></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 /></td>
</tr>
</table>
</body>
</html>
The final effect is shown in the figure below: