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
The difference between ENTRYPOINT and CMD in Dockerfile
In the Docker system learning tutorial, we learne...
In-depth explanation of JavaScript this keyword
Table of contents 1. Introduction 2. Understand t...
CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation
1. Add users and groups 1. Add mysql user group #...
A brief analysis of how MySQL implements transaction isolation
Table of contents 1. Introduction 2. RC and RR is...
Analysis and solution of a MySQL slow log monitoring false alarm problem
Previously, for various reasons, some alarms were...
jQuery implements time selector
This article example shares the specific code of ...
HTML drag and drop function implementation code
Based on Vue The core idea of this function is ...
2017 latest version of windows installation mysql tutorial
1. First, download the latest version of MySQL fr...
Solution to the problem that crontab output redirection does not take effect in Linux
question In LINUX, periodic tasks are usually han...
Solution to the ineffectiveness of flex layout width in css3
Two-column layout is often used in projects. Ther...
Use PS to create an xhtml+css website homepage in two minutes
There are too many articles about xhtml+css websi...
Free tool to verify that HTML, CSS and RSS feeds are correct
One trick for dealing with this type of error is t...
Detailed explanation of IFNULL() and COALESCE() functions to replace null in MySQL
The isnull() function cannot be used as a substit...
How to add a certificate to docker
1. Upgrade process: sudo apt-get update Problems ...
The problem of jquery.form.js denying access in IE and the input upload button must be actively clicked
Let's take a look at the code first <form ...