Renderings:
The source
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>rem字体+百分比布局表格</title> 8 <style> 9 table{width:100%;height:auto;font-size:.11rem} 10 table tr>td{width:25%;vertical-align:middle;text-align:center;background-color:#FFFFFF;height:.33rem;line-height:.33rem} 11 table tr:nth-of-type(odd) td:nth-of-type(even){background:#EEFFFF;color:#333} 12 table tr>td:nth-of-type(odd){background:#F0F0F0;color:#006600} 13 </style> 14 </head> 15 <body> 16 <table cellspacing="0" bordercolor="#F1E0A0" cellpadding="0" border="1"> 17 <tr> 18 <td>Region azimuth </ TD > . 19 < TD > South region </ TD > 20 is < TD > cell locations </ TD > 21 is < TD > Lingan </ TD > 22 is </ TR > 23 is < TR > 24 < TD > Housing type </ TD > 25 < TD > small high </ TD > 26 is < TD >Unit Structure </TD > 27 < TD > . 3 chambers 2 1 Bath </ TD > 28 </ TR > 29 < TR > 30 < TD > floor where </ TD > 31 is < TD > 1 F </ TD > 32 < TD > decoration degree </ TD > 33 is < TD > blank Unloaded </ TD > 34 is </ TR > 35 <tr> 36 < TD > Number of floors </ TD > 37 [ < TD > 12 is layer </ TD > 38 is < TD > building area </ TD > 39 < TD > 95.40㎡ </ TD > 40 </ TR > 41 is < TR > 42 is < TD > garage </ TD > 43 is < TD > Cycling library </ TD > 44 < TD > number of title deeds </ TD > 45 < TD > less than two years </ TD > 46 is </ TR > 47 < TR > 48 < TD > Elementary School District </ TD > 49 < TD > </ TD > 50 < TD > middle school District </ TD > 51 is < TD > in Tongxiang seven </ TD > 52 is </tr> 53 is < TR > 54 is < TD > Housing toward </ TD > 55 < TD > south </ TD > 56 is < TD > Land Nature </ TD > 57 is < TD > commercial land </ TD > 58 </ TR > 59 < TR > 60 < TD > Year built </ TD > 61 is < TD >2017 </TD > 62 is < TD > per square monovalent </ TD > 63 is < TD > 8909 membered </ TD > 64 </ TR > 65 < TR > 66 < TD > documents where </ TD > 67 < TD > complete documents </ td > 68 < td > transaction price </ td > 69 < td style = "Color: Red;">85.00万</td> 70 </tr> 71 <tr> 72 <td>配套设施</td> 73 <td colspan="3"></td> 74 </tr> 75 </table> 76 <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script> 77 <script> 78 (function (doc, win) { 79 var docEl = doc.documentElement, 80 resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", 81 recalc = function () { 82 var clientWidth = docEl.clientWidth; 83 if (!clientWidth) 84 return; 85 if (clientWidth < 750) { 86 docEl.style.fontSize = 120 * (clientWidth / 750) + "px"; 87 console.log(120 * (clientWidth / 750) + "px") 88 } else { 89 docEl.style.fontSize = "120px" 90 } 91 }; 92 if (!doc.addEventListener) 93 return; 94 win.addEventListener(resizeEvt, recalc, false); 95 doc.addEventListener('DOMContentLoaded', recalc, false) 96 })(document, window); 97 $(document).ready(function () {}); 98 </script> 99 </body>
Use rem font! Do not use flex layout, otherwise colspan = "3" has no effect, I used here is the percentage of the distribution;