Table or div-open solution

Table or div-open solution

Abstract: After adding content in the background, it is found that the displayed page is open, causing the webpage to be extremely unattractive. , now Xiaoxiang online to find a way to prevent the table or div is open to summarize a good method, and everyone to share.

When we design the page, there will always be some unpleasant things, the most common is to add content in the background only to find that the displayed page is open, resulting in a page extremely unattractive. Before we are basically design forms, online natural many of the solutions, and now there is a div CSS standard design, rarely see the relevant methods, now Xiaoxiang online to prevent the table is usually found to be open a good way to summarize, and everyone to share.

First, directly in the page to set the size of the picture, such as code:

<img  SRC  = "http://www.jb51.net/images/webjxcom.jpg"  Span class= "Hljs-attribute" style= "color: #b58900;" >width  = height  = border  =; , 

This can limit the size of the picture, but you need to manually modify the image size before uploading the picture, otherwise the uploaded image will be distorted.

Second, use the following code:

<img src="http://www.jb51.net/images/webjxcom.jpg" onload="javascript:if(this.width>600}{this.resized=true;this.style.width=600;}">

This method will be in the call to the picture, automatically scaled to the specified width, will not cause the picture deformation, and will not burst the table, but the disadvantage is that if the picture is too large, in the picture download process, that is, the picture is displayed in the process, will be the original size of the picture, then burst the table, the page is difficult When the picture is fully displayed, the picture will automatically shrink.

Third, we can limit the size of the table properties to prevent being open, such as in

<table width="600" border="0" cellpadding="0" cellspacing="0">里添加代码“style="table-layout:fixed;word-wrap:break-word;word-break;break-all;"”

Among them "table-layout:fixed; "is to secure the table layout, effectively preventing the table from being stretched,
"Word-wrap:break-word;" is to control the line-wrapping, that is, forcing the line-wrapping, this in the context of more text needs to use, especially the repetition of the content, do not execute the line, the table is open;
and "Word-break:break-all; "You can solve the problem of IE's frame being open in English (non-Asian text lines), but will not force line wrapping, only show the contents of the table width."

In general, as long as the use of "style=" Table-layout:fixed;word-wrap:break-word; "" We can. Of course, the statements above can be defined in CSS, such as

table { table-layout: fixed; word-wrap:break-word; }

Iv. using CSS to control the size of the image, code such as:

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 browser maximum width of 600px, but in IE6 invalid; width:600px; In all browsers the size of the picture is 600px, when the picture size is larger than 600px, automatically reduced to 600px, in IE6, and Overflow:hidden; Refers to hiding parts that are beyond the size of the set to prevent the table from being distorted by the failure to control the size of the picture.

Finally, summarize the most useful code:
If this 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: 加上宽度; overflow: hidden; (让多出来的不显示。) }

Table or div-open solution