Differences Between Automatic table stretching in chrome and IE

Recently, I am working on browser compatibility. I have been plagued by the problem of table auto-stretching. This problem has finally come to an end today. I strongly recommend this article, if you encounter this problem, I believe you will be grateful to me. If the article is helpful to you, please leave a message for your support and exchange. Many of the elements in table html are not recommended, because table is sometimes difficult to control, and some content is automatically not configured with the td width and content. Edge problems sometimes cause headaches, if you have such a problem, please contact me. As the saying goes, there is no error in using td or table in horizontal layout, today, I am mainly talking about the function of auto-stretching the distribution of td width of table in Chrome and IE. First, classify the browsers with this problem. This classification is tested by me: browser A: Keep the ratio of td unchanged during table stretching, however, the calculated width [Sum of every td width] may not match the actual width [table width]: IE8, IE9, IE10, FirefoxB Browser: the ratio of td to be maintained during table stretching may change, however, the calculated width [Sum of every td width] is the same as the actual width [table width]: Chrome, Safari, and IE7 details the differences between the two conditions, this is generated in special cases. If the table width is 100px [the border is 0, the padding and spacing are both 0], there are 5 td IDs in total, each of which is 20px, each addition and subtraction is a multiple of 5, so there is no difference between the two browsers. However, if you add 3px at a time, because the browser calculates the width and height of the element without decimal places [pixels are the smallest units that the display can recognize], how are these three pixels allocated to the five td of the table allocated? The specific issue is how to calculate IE and Chrome should be written to the browser kernel engineers, but we can analyze their different implementations from their performance. Browser A will scale according to the proportion. For example, let's look at the red line between picture 19 and 21. If it is at the position of 2/3 of the entire image before stretching, after stretching, the red line is still at the position of 2/3. However, in browser B, you can calculate the ratio of 2/3 to a lower value. The actual difference depends on the actual value, in browser B, if we want to calculate the accurate red line location, how can we calculate it? Here I provide a way to see the number of td in the red line, if it is 7th td, then after stretching, calculate the width of the first six td, which adds up to the location of the red line, my other method for binding the td property is essentially the same as this method. Why, it is mainly because browser B maintains that the sum of all td S is consistent with the width of the entire table when stretching the td S. Therefore, it is always accurate to calculate the sum of the width of each td S. Attached to my test code: [html] <span style = "font-size: 18px;"> <! DOCTYPE html>