CSS can be used to prevent tables from being opened or Div layers from being opened.

CSS can be used to prevent tables from being opened or Div layers from being opened.

 

When designing a webpage, we always encounter unpleasant things. The most common thing is to add content in the background before we find that the displayed page is opened, which leads to extremely bad web pages. In the past, most people were designing
Table, a lot of solutions for the Internet, and today there are still Div
The CSS standard design rarely shows the relevant good methods. Now, Xiaoxiang online summarizes the methods used to prevent tables from being opened and shares them with you.

1. Set the image size directly on the webpage, for exampleCode: Src = "/u/info_img/2008-01/15/www.xxol.net.jpg" width = "600" Height = "500"
Border = "0">, although the image size can be limited, you must manually modify the image size before uploading the image. Otherwise, the uploaded image will be deformed.

Ii. Use the following code: Onload = "">

This method will automatically scale down the image to the specified width in proportion when calling the image, without causing deformation of the image or breaking the table. However, the disadvantage is that the fake image is too large, during the image download process, that is, during the image display process, the image will be first displayed in the original size, then the table will be broken and the page will be ugly. 2. When the image is fully displayed, the image is automatically reduced.

3. We can restrict the size of table attributes to prevent them from being opened. For example, in <Table width = "600" border = "0"
Cellpadding = "0"
In cellspacing = "0"> Add the code "style =" table-layout: fixed; Word-wrap: Break-word;
Word-break; break-all; "", where "table-layout: fixed;
To fix the table layout, You can effectively prevent the table from being opened. "word-wrap: Break-word;
"Is to control the line feed, that is, to force the line feed, which needs to be used in the case of a large number of text content, especially when repeated content appears, if you do not execute the line feed, the table is opened, and "word-
Break: Break-all;
It can solve the problem that the IE framework is opened in English (non-Asian text lines), but it does not force line breaks and only displays the content in the table width. Generally
"Style =" table-layout: fixed; Word-wrap: Break-word. Of course, the statements called above can be defined in CSS
For example

Table {
Table-layout: fixed;
Word-wrap: Break-word;
}

4. Use CSS to control the adaptive image size. The Code is as follows:

IMG {
Max-width: 600px;
Width: expression (this. Width & gt; 600? "600px": This. width );
Overflow: hidden;
}

Its
Max-width: 600px;
In other non-ie browsers such as IE7 and Firefox, the maximum width is 600px, but it is invalid in IE6; width: 600px;
In all browsers, the image size is 600px. When the image size is greater than 600px, it is automatically reduced to 600px, which is valid in IE6, while overflow: hidden;
Hide the part that exceeds the specified size to avoid the table opening and deformation caused by the failed image size control.

5. Summarize the most practical code:
For tables, use:

Table {
Table-layout: fixed;
Word-break: Break-all;
}

For the DIV layer, use:

Div {
Table-layout: fixed;
Word-wrap: Break-word;
Width: add the width;
Overflow: hidden .)
}

 

Example: