Комментарий: Фоновое изображение таблицы не может быть отображена на 100% - головная боль. К счастью, я нашел решение онлайн. Друзья в нуждающихся могут ссылаться на это.
Следующая ситуация была найдена во время разработки:
(1) Если файл хранится в форме суффикса файла .jsp, код выглядит следующим образом (index.jsp):
Код заключается в следующем:
<%@page contentype = 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>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> пусть таблица будет отображаться на 100%</title>
</head> </p> <p> <body style = fachine:#9c9;>
<таблица CellPading = 0 CellPacing = 0 Style = ширина: 100%; >
<tr>
<TD высота = 8 ширина = 17px; > <img src = img/bg header_l.gif width = 17 высота = 8/> </td>
<td style = founfer: url (img/bg header_c.gif) repeat-x;> </td>
<TD высота = 8 ширина = 17px; > <img src = img/bg header_r.gif width = 17 высота = 8/> </td>
</tr>
</table>
</body>
</html>
После запуска программы эффект, отображаемый на странице, показан на рисунке ниже:
В этом эффекте есть два неверных места:
(1) фон TD в середине не покрывает весь TD;
(2) Вся ширина таблицы не заполняет весь экран.
Я был озадачен и очень подавлен! ! На заднем плане попробуйте добавить границу = 0 в таблицу, и эффект все еще как показано на рисунке выше. Измените от 0 на 1 и обнаружите, что таблица заполняет весь экран, а TD также покрыт фоном, как показано на рисунке ниже, но граница таблицы - это не то, что я хочу.
Было обнаружено, что вышеупомянутый метод не может принципиально решить проблему.
Затем я сравнил 3 TD в таблице и обнаружил, что во втором TD не было контента, поэтому я попытался заполнить контент во втором TD, и код был следующим образом:
<таблица CellPading = 0 CellPacing = 0 Style = ширина: 100%; >
<tr>
<TD высота = 8 ширина = 17px; > <img src = img/bg header_l.gif width = 17 высота = 8/> </td>
<td style = fourene: url (img/bg header_c.gif) repeat-x;> второй TD добавляет содержимое </td>
<TD высота = 8 ширина = 17px; > <img src = img/bg header_r.gif width = 17 высота = 8/> </td>
</tr>
</table>
Эффект после запуска кода в основном соответствует конечному результату, и эффект работы заключается в следующем:
Ниже приведена небольшая корректировка кода, полный код заключается в следующем:
Код заключается в следующем:
<%@page contentype = 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>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> пусть таблица будет отображаться на 100%</title>
</head>
<стиль кузова = фон:#9c9;>
<таблица CellPading = 0 CellPacing = 0 Style = ширина: 100%; >
<tr>
<TD высота = 8 ширина = 17px; > <img src = img/bg header_l.gif width = 17 высота = 8/> </td>
<td style = фон: url (img/bg header_c.gif) repect-x; размер шрифта: 0px;> & nbsp; </td>
<TD высота = 8 ширина = 17px; > <img src = img/bg header_r.gif width = 17 высота = 8/> </td>
</tr>
</table>
</body>
</html>
Окончательный эффект показан на рисунке ниже: