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
Solve the problem that Mysql5.7.17 fails to install and start under Windows
Install MySQL for the first time on your machine....
mysql 5.7.20 win64 installation and configuration method
mysql-5.7.20-winx64.zipInstallation package witho...
HTML+CSS to implement the sample code of the navigation bar drop-down menu
Effect The pictures in the code can be changed by...
In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle
Table of contents Same Origin Policy Ajax request...
JS operation object array to achieve add, delete, modify and query example code
1. Introduction Recently, I helped a friend to ma...
Detailed explanation of the solution to font blur when using transform in CSS3
This question is very strange, so I will go strai...
Regarding the Chinese garbled characters in a href parameter transfer
When href is needed to pass parameters, and the p...
Example code of how CSS matches multiple classes
CSS matches multiple classes The following HTML t...
JavaScript counts the number of times a character appears
This article example shares the specific code of ...
B2C website user experience detail design reference
Recently, when using Apple.com/Ebay.com/Amazon.co...
How to deploy Rancher with Docker (no pitfalls)
Must read before operation: Note: If you want to ...
Detailed explanation of CentOS7 online installation of Docker 17.03.2 using Alibaba Cloud Docker Yum source
Reference Documentation Official Docker installat...
How to execute Linux shell commands in Docker
To execute a shell command in Docker, you need to...
Linux configuration SSH password-free login "ssh-keygen" basic usage
Table of contents 1 What is SSH 2 Configure SSH p...
Ubuntu 19.04 installation tutorial (picture and text steps)
1. Preparation 1.1 Download and install VMware 15...