Table setting background image cannot be 100% displayed solution
|
The following situations were discovered during development: Copy code 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>Make the table 100% visible</title> </head></p> <p><body style="background:#9C9;"> <table cellpadding="0" cellspacing="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 runs, the effect displayed on the page is as shown below:
(1) The background of the middle TD does not cover the entire TD; (2) The entire table width does not fill the entire screen. I can't figure it out and I'm very depressed! ! Try adding border="0" to the table in the background, the effect is still as shown in the figure above. After changing 0 to 1, I found that the table filled the entire screen and the td was also covered by the background, as shown below, but the border of the table is not what I want.
Then I checked the three td in the table and found that there was no content in the second td, so I tried to fill in the second td. The code is as follows: Copy code The code is as follows:<table cellpadding="0" cellspacing="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;">Add content to the second td</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 consistent with the final result. The running effect is as follows:
Copy code 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>Make the table 100% visible</title> </head> <body style="background:#9C9;"> <table cellpadding="0" cellspacing="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:
|
<<: Several things to note when making a web page
>>: TypeScript problem with iterating over object properties
Recommend
Solution to mysql server 5.5 connection failure
The solution to the problem that mysql cannot be ...
Samba server configuration under Centos7 (actual combat)
Samba Overview Samba is a free software that impl...
Javascript File and Blob Detailed Explanation
Table of contents File() grammar parameter Exampl...
JavaScript canvas text clock
This article example shares the specific code of ...
Paragraph layout and line breaks in HTML web pages
The appearance of a web page depends largely on i...
Detailed tutorial on installing Docker on CentOS 7.5
Introduction to Docker Docker is an open source c...
js dynamically generates tables (node operations)
This article example shares the specific code of ...
Nginx server https configuration method example
Linux: Linux version 3.10.0-123.9.3.el7.x86_64 Ng...
Detailed tutorial on installing ElasticSearch 6.x in docker
First, pull the image (or just create a container...
Detailed explanation of MySQL master-slave replication and read-write separation
Table of contents Preface 1. Overview 2. Read-wri...
Implementation principle and configuration of MySql master-slave replication
Database read-write separation is an essential an...
Docker case analysis: Building a Redis service
Table of contents 1 Create mount directories and ...
Robots.txt detailed introduction
Basic introduction to robots.txt Robots.txt is a p...
Implementation steps for docker deployment of springboot and vue projects
Table of contents A. Docker deployment of springb...
ftp remotely connect to Linux via SSH
First install ssh in Linux, taking centos as an e...