Komentar: Gambar latar belakang tabel tidak dapat ditampilkan 100% adalah sakit kepala. Untungnya, saya menemukan solusi online. Teman yang membutuhkan dapat merujuknya.
Situasi berikut ditemukan selama pengembangan:
(1) Jika file disimpan dalam bentuk akhiran file .jsp, kodenya adalah sebagai berikut (index.jsp):
Kodenya adalah sebagai berikut:
<%@page contentType = Teks/html; Charset = UTF-8 PageEncoding = UTF-8 Bahasa = Java %>
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = UTF-8 />
<title> Biarkan tabel ditampilkan 100%</title>
</head> </p> <p> <body style = latar belakang:#9c9;>
<Table Cellpading = 0 CellPacing = 0 Gaya = Lebar: 100%; >
<tr>
<TD tinggi = 8 lebar = 17px; > <img src = img/bg-header_l.gif width = 17 tinggi = 8/> </td>
<td style = latar belakang: url (img/bg-header_c.gif) ulangi-x;> </td>
<TD tinggi = 8 lebar = 17px; > <img src = img/bg-header_r.gif width = 17 tinggi = 8/> </td>
</tr>
</boable>
</body>
</html>
Setelah program dijalankan, efek yang ditampilkan pada halaman ditampilkan pada gambar di bawah ini:
Ada dua tempat yang salah dalam efek ini:
(1) latar belakang TD di tengah tidak menutupi seluruh TD;
(2) Seluruh lebar tabel tidak mengisi seluruh layar.
Saya bingung dan sangat tertekan! Lai Di latar belakang, cobalah untuk menambahkan perbatasan = 0 ke tabel, dan efeknya masih seperti yang ditunjukkan pada gambar di atas. Ubah 0 menjadi 1 dan temukan bahwa tabel mengisi seluruh layar, dan TD juga ditutupi dengan latar belakang, seperti yang ditunjukkan pada gambar di bawah ini, tetapi perbatasan tabel tidak seperti yang saya inginkan.
Ditemukan bahwa metode di atas tidak dapat secara fundamental menyelesaikan masalah.
Kemudian saya membandingkan 3 TDs di tabel dan menemukan bahwa tidak ada konten di TD kedua, jadi saya mencoba mengisi konten di TD kedua, dan kodenya adalah sebagai berikut:
<Table Cellpading = 0 CellPacing = 0 Gaya = Lebar: 100%; >
<tr>
<TD tinggi = 8 lebar = 17px; > <img src = img/bg-header_l.gif width = 17 tinggi = 8/> </td>
<td style = latar belakang: url (img/bg-header_c.gif) ulangi-x;> TD kedua menambahkan konten </td>
<TD tinggi = 8 lebar = 17px; > <img src = img/bg-header_r.gif width = 17 tinggi = 8/> </td>
</tr>
</boable>
Efeknya setelah menjalankan kode pada dasarnya sejalan dengan hasil akhir, dan efek operasi adalah sebagai berikut:
Berikut ini adalah sedikit penyesuaian pada kode, kode lengkapnya adalah sebagai berikut:
Kodenya adalah sebagai berikut:
<%@page contentType = Teks/html; Charset = UTF-8 PageEncoding = UTF-8 Bahasa = Java %>
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = UTF-8 />
<title> Biarkan tabel ditampilkan 100%</title>
</head>
<body style = latar belakang:#9c9;>
<Table Cellpading = 0 CellPacing = 0 Gaya = Lebar: 100%; >
<tr>
<TD tinggi = 8 lebar = 17px; > <img src = img/bg-header_l.gif width = 17 tinggi = 8/> </td>
<td style = latar belakang: url (img/bg-header_c.gif) ulangi-x; Ukuran font: 0px;> & nbsp; </td>
<TD tinggi = 8 lebar = 17px; > <img src = img/bg-header_r.gif width = 17 tinggi = 8/> </td>
</tr>
</boable>
</body>
</html>
Efek akhir ditunjukkan pada gambar di bawah ini: