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 Vue's props configuration

Solution to the problem that the div width is set to width:100% and then the padding or margin exceeds the parent element

Blog

Detailed tutorial for downloading, installing and configuring MySQL 5.7.27

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

Detailed explanation of Vue's props configuration

Discussion on the problem of garbled characters in iframe page parameters

HTML table tag tutorial (31): cell width and height attributes WIDTH, HEIGHT

Detailed tutorial for installing influxdb in docker (performance test)

Vue local component data sharing Vue.observable() usage

Solution to the problem that the div width is set to width:100% and then the padding or margin exceeds the parent element

Detailed tutorial for downloading, installing and configuring MySQL 5.7.27

Javascript to achieve the effect of closing advertisements

Solution to invalid Nginx cross-domain setting Access-Control-Allow-Origin

Detailed explanation of the use of redux in native WeChat applet development

Recommend

How to configure whitelist access in mysql

MySQL index failure principle

Detailed explanation of value transfer between parent and child components in Vue3

MySQL infobright installation steps

Detailed explanation of how Nginx works

Usage instructions for the docker create command

Linux automatic login example explanation

Solution to React pure function component setState not refreshing the page update

Detailed explanation of vue3 cache page keep-alive and unified routing processing

Detailed explanation of JavaScript stack and copy

VMware configuration VMnet8 network method steps

MySQL Tutorial: Subquery Example Detailed Explanation

foreman ubuntu16 quick installation

Detailed graphic description of the database installation process of MySQL version 5.7.24

Detailed description of HTML table border control