Implementing text adaptive image width in CSS Table image and text mixing (super simple, crosses all browsers)_javascript skills

This creates a problem. If the picture is too small, or the text is too long, the text will stretch out the entire table, which takes up a lot of space and the display effect is very unsightly.
There are many solutions on the Internet, but they are either complicated, cannot solve cross-browser issues, or cannot adapt to changes in image size.
In my method, I solved: No need to specify the image size in the code, cross-browser, very simple. The final effect is shown in the picture below. When the text is too long, it will automatically wrap to fit the width of the picture:

The method is as follows:
1) The picture and picture description code are as follows:

香港殖民地最后的一面旗帜，由英国蓝旗和代表香港的殖民地徽所组成，1959年-1997年

2) "mod_img" is defined as follows, which specifies the CSS style of the table and image borders:
.mod_img {margin:6px; border:1px solid #AAAAAA; padding: 3px; }
.mod_img img{margin:3px; border:1px solid #AAAAAA; padding:0px; }
3) "mod_img_desc" is defined as follows, which specifies the CSS style of the description text:
.mod_img_desc {font-size:12px ;word-break:break-all;width:100%; overflow:auto;}
The key here is the width="10" above. This is the key to the text adaptive image width. In fact, 10 is a A very small value. Generally, pictures are larger than this value. When a picture is displayed in a table, the picture will expand the table according to its actual size. Therefore, this width will not affect the display of the picture. However, in 3) The width of the text is specified as 100%, which means that the text is displayed according to the actual width, regardless of the width. When the text exceeds the width, it will automatically wrap.
After testing, this method can work perfectly in IE/Firefox/Safari/Opera and other browsers! Have a nice day.