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

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

Recommend

Detailed steps to install the NERDTree plugin in Vim on Ubuntu

NERDTree is a file system browser for Vim. With t...

Implementation of waterfall layout + dynamic rendering

Table of contents Typical waterfall website Water...

Solution to forgetting mysql password under linux

The problem is as follows: I entered the command ...

JS realizes automatic playback of timeline

Recently, I have implemented such an effect: clic...

Docker online and offline installation and common command operations

1. Test environment name Version centos 7.6 docke...

Vue uses echart to customize labels and colors

This article example shares the specific code of ...

Detailed steps for installing MinIO on Docker

Table of contents 1. Check whether the docker env...

JavaScript pre-analysis, object details

Table of contents 1. Pre-analysis 1. Variable pre...

MySQL 5.7.20 installation and configuration method graphic tutorial under Windows

Install MySQL under Windows for your reference. T...

Detailed explanation of SQL injection - security (Part 2)

If there are any errors in this article or you ha...

How to implement vue page jump

1. this.$router.push() 1. Vue <template> &l...

Web page custom selection box Select

Everyone may be familiar with the select drop-dow...

Detailed explanation of pipeline and valve in tomcat pipeline mode

Preface In a relatively complex large system, if ...

How to handle concurrent updates of MySQL data

Will UPDATE lock? Will the SQL statement be locke...

hr horizontal line style example code

Copy code The code is as follows: <hr style=&q...