Table, td width invalidation - table layout problem

    The table layout in the project is still relatively common. I encountered a problem of invalid table width. Let’s start with the code:

<div style="width:800px;margin: 60px;">
    <table style="width: 100%;max-width: 100%;">
        <tbody>
            <tr style="max-width: 900px;overflow: hidden;">
                <td style="max-width: 1000px;" >
                    <div style="width: 1100px;">
                        <p style="width: 1200px;">测试文本rem由来：                              
                        </p>
                    </div>
                </td>
                <td>rem由来：font size of the root element，那么rem是个单位，
                </td>
                <td>rem由来：font size of the root element，那么rem是个单位，
                </td>
            </tr>
            <tr style="max-width: 900px;overflow: hidden;">
                <td style="max-width: 1000px;" >
                    <div style="width: 1100px;">
                        <p style="width: 1200px;">测试文本rem由来：                              
                        </p>
                    </div>
                </td>
                <td>rem由来：
                </td>
                <td>rem由来：
                </td>
            </tr>
        </tbody>
    </table>
</div>

      At this time, the width of td is still the width set by itself, and the width of 900px set by tr and the width of 100% set by table itself are invalid and become 1167px; their widths are neither the widest 1200px among the child elements; nor are they The width set by itself, so it seems that the browser has automatically allocated their width ,

      My personal understanding is that tr itself represents a line, so it will not display elements that exceed its own width by wrapping lines, so the display effect of the following figure appears; sometimes although the div in td does not manually set the width, it is still Occasionally inexplicably propped up the tr. . .

Referring to Li Wanbao's blog, the width of td has the following situations (assuming a table with a width of 600px and 3 td in it):

1. The width of the table is set, and the width of the td is not set . The td divides the width of the table equally, and each cell will divide the width of the table equally according to the ratio of the length of each content;

2. The width of the defined table is 600px, and the width of the first and third is 400px. At this time, the system will first calculate the actual width of the second one, assuming that the second one is 40px, and then are proportionally equal. divide the remaining width ;

3. If the width of the td content is less than the width set by the table, it will be automatically filled . Such as: the first 100px, the third 200px, the second td is naturally: 600-100-200=300px;

4. Percentages and numbers are used at the same time, and the percentage has high priority . After calculating the width of the percentage, the remaining width is divided equally or redistributed according to the set width value. After removing the border and padding in the following structure, the final width of td1 is 100px, the width of td2 is 296px, and the width of td3 is 196px;

<table style="width:600px; background-color:blue" >
    <tr>
         <td width="200px">1</td>
         <td width="50%">2</td>
         <td width="400px">3</td>
     </tr> 
 </table> 

5. Set the width of the td to 100px. If the content of the td is plain text, if the content exceeds 100px, it will wrap in the td, but if the div inside is set to 400px, the default value of the td will be widened. Conclusion: The width defined by table and td is Default width, actual width is determined by content .