The solution to the problem that the web table or div layer is stretched in the web page

<br />When we design web pages, we always encounter some unpleasant things. The most common thing is that after adding content in the background, we find that the displayed page is stretched, making the web page extremely unsightly. In the past, everyone basically designed tables, and there were naturally many solutions on the Internet. Nowadays, there is also div css standard design, and it is rare to see related good methods. Now Xiaoxiang Online summarizes the good methods found to prevent tables from being stretched, and shares them with everyone.
1. Set the image size directly on the web page, such as the code: <img src="https://www.jb51.net/images/jb51com.jpg" width="600" height="500" border="0">. 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: <img src="https://www.jb51.net/images/jb51com.jpg" onload="javascript:if(this.width>600}{this.resized=true;this.style.width=600;}">
This method will automatically scale down the image to the specified width when calling the image, which will not cause deformation of the image and will not break the table. However, the disadvantage is that if the image is too large, it will be displayed in its original size during the image download process, that is, during the image display process. At this time, the table will be broken and the page will be ugly. Secondly, when the image is fully displayed, it will automatically shrink again.
3. We can limit the size of the table based on its attributes to prevent it from being stretched. For example, we can add the code "style="table-layout:fixed;word-wrap:break-word;word-break;break-all;"" in <table width="600" border="0" cellpadding="0" cellspacing="0">, where "table-layout:fixed;" is to fix the table layout, which can effectively prevent the table from being stretched. "word-wrap:break-word;" is to control line breaks, that is, to force line breaks. This is necessary when there is a lot of text content, especially when repeated content appears. If line breaks are not performed, the table will be stretched. "word-break: break-all;" can solve the problem of IE's frame being stretched by English (non-Asian language text lines), but it will not force line breaks and only display the content within the table width. In general, just use “style="table-layout:fixed;word-wrap:break-word;"”. Of course, the above statement can be defined in CSS, such as
table {
table-layout: fixed;
word-wrap:break-word;
}
4. Use CSS to control the adaptive size of the picture, the code is as follows:
img {
max-width: 600px;
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
Among them, max-width:600px; means the maximum width is 600px in IE7, FireFox and other non-IE browsers, but it is invalid in IE6; width:600px; the image size is 600px in all browsers, and when the image size is larger than 600px, it is automatically reduced to 600px, which is valid in IE6; and overflow:hidden; means hiding the part that exceeds the set size to avoid the deformation of the table caused by failure to control the image size.
5. Finally, let’s summarize the most practical code:
If it is a table, 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: add width;
overflow: hidden; (make the extra content invisible.)
}

<<: How to update v-for in Vue

>>: Detailed explanation of installing redis in docker and starting it as a configuration file

Detailed explanation of how to use JS to achieve the effect of PS eraser scratch card in canvas

The solution to the problem that the web table or div layer is stretched in the web page

Detailed explanation of how to use JS to achieve the effect of PS eraser scratch card in canvas

An article to show you how to create and use Vue components

Detailed explanation of the practice of installing the Permeate range system using VMware

Take you to understand MySQL character set settings in 5 minutes

5 Ways to Clear or Delete Large File Contents in Linux

Summary of CSS front-end knowledge points (must read)

MySQL permissions and database design case study

Tips and precautions for using MySQL index

Advantages of MySQL covering indexes

Tutorial on configuring SSH and Xshell to connect to the server in Linux (with pictures)

Recommend

MySQL 8.0.20 installation and configuration method graphic tutorial

Detailed introduction to logs in Linux system

Summary of the differences between Html, sHtml and XHtml

Comparison of two implementation methods of Vue drop-down list

React antd tabs switching causes repeated refresh of subcomponents

CSS achieves colorful and smart shadow effects

Common solutions for Mysql read-write separation expiration

Using JavaScript to implement carousel effects

Using zabbix to monitor the ogg process (Linux platform)

WeChat applet implements simple calculator function

Detailed explanation of the use of filter properties in CSS3

Docker image analysis tool dive principle analysis

How to implement nginx smooth restart

JavaScript adds prototype method implementation for built-in objects

Simple usage of MySQL temporary tables