The solution to the web table or div layer being stretched in the web page_HTML/Xhtml_Web page production

When we design web pages, we always encounter some unpleasant things. The most common one is to find that the displayed page is stretched after adding content in the background, causing the web page to be extremely unsightly. In the past, everyone basically designed tables, and there were naturally many solutions on the Internet. Nowadays, there are also div css standard designs, and it is rare to see related good methods. Now Xiaoxiang Online has found a good way to prevent tables from being stretched. Summarize it and share it with everyone.
1. Set the image size directly on the web page, such as code: . Although this can limit the image size, you need to manually modify the image size before uploading the image, otherwise the uploaded image will be deformed.
2. Use the following code:
This method will automatically scale down to the specified width when calling the image. It will not cause the image to deform and will not burst the table. However, the disadvantage is that if the image is too large, it will not be processed during the image download process. , that is, during the image display process, the image will first be displayed in its original size. At this time, the table will burst and the page will be ugly. Secondly, when the image is fully displayed, the image will automatically shrink again.
3. We can limit the size of the table attributes to prevent it from being stretched. For example, add the code "style="table-layout:fixed;word-wrap:break-word;word-break;break" in -all;"", where "table-layout:fixed;" is to fix the table layout, which can effectively prevent the table from being stretched, and "word-wrap:break-word;" is to control line breaks, that is Force line breaks. This needs to be used when there is a lot of text content, especially when repeated content appears. If line breaks are not performed, the table will be stretched; and "word-break: break-all;" can solve IE The problem is that the frame is stretched by English (non-Asian language text lines), but it will not force a line break, and only displays the content within the width of the table. Under normal circumstances, just use "style="table-layout:fixed;word-wrap:break-word;"". Of course, the statement called above can be defined in css, such as
table {
table-layout: fixed;
word-wrap:break-word;
}
4. Use css to control the adaptive size of images. The code is as follows:
img {
max-width: 600px;
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
Among them, max-width: 600px; in IE7, FireFox and other non-IE browsers, the maximum width is 600px, but it is invalid in IE6; width: 600px; in all browsers, the size of the picture is 600px, when the picture size If it is larger than 600px, it will be automatically reduced to 600px, which is valid in IE6; and overflow:hidden; means to hide the part that exceeds the set size to avoid the spread and deformation of the table caused by failure to control the image size.
5. Finally, summarize the most practical codes:
If it is a form, please use:
table {
table-layout: fixed;
word-break: break-all;
}
If it is a div layer, please use:

div {
table-layout: fixed;
word-wrap: break-word;
width: plus width;
overflow: hidden; (Let the extra not be displayed.)
}