ความคิดเห็น: ภาพพื้นหลังของตารางไม่สามารถแสดงได้ 100% เป็นอาการปวดหัว โชคดีที่ฉันพบวิธีแก้ปัญหาออนไลน์ เพื่อนที่ต้องการสามารถอ้างถึงได้
พบสถานการณ์ต่อไปนี้ในระหว่างการพัฒนา:
(1) หากไฟล์ถูกเก็บไว้ในรูปแบบของคำต่อท้ายไฟล์. jsp รหัสจะมีดังนี้ (index.jsp):
รหัสมีดังนี้:
<%@page contentType = text/html; charset = utf-8 pageencoding = utf-8 language = java %>
<! doctype html สาธารณะ -// 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 = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8 />
<title> ให้ตารางแสดง 100%</title>
</head> </p> <p> <body style = พื้นหลัง:#9c9;>
<ตาราง cellpading = 0 cellpacing = 0 style = ความกว้าง: 100%; -
<tr>
<td ความสูง = 8 ความกว้าง = 17px; > <img src = img/bg-header_l.gif width = 17 ความสูง = 8/> </td>
<td style = background: url (img/bg-header_c.gif) ซ้ำ -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 TDS ในตารางและพบว่าไม่มีเนื้อหาใน 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 = background: url (img/bg-header_c.gif) ซ้ำ -x;> td ที่สองเพิ่มเนื้อหา </td>
<td ความสูง = 8 ความกว้าง = 17px; > <img src = img/bg-header_r.gif width = 17 ความสูง = 8/> </td>
</tr>
</table>
เอฟเฟกต์หลังจากเรียกใช้รหัสนั้นสอดคล้องกับผลลัพธ์สุดท้ายและเอฟเฟกต์การดำเนินการมีดังนี้:
ต่อไปนี้เป็นการปรับรหัสเล็กน้อยรหัสที่สมบูรณ์มีดังนี้:
รหัสมีดังนี้:
<%@page contentType = text/html; charset = utf-8 pageencoding = utf-8 language = java %>
<! doctype html สาธารณะ -// 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 = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8 />
<title> ให้ตารางแสดง 100%</title>
</head>
<body style = background:#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) ซ้ำ -x; ขนาดตัวอักษร: 0px;> & nbsp; </td>
<td ความสูง = 8 ความกว้าง = 17px; > <img src = img/bg-header_r.gif width = 17 ความสูง = 8/> </td>
</tr>
</table>
</body>
</html>
เอฟเฟกต์สุดท้ายจะแสดงในรูปด้านล่าง: