percent-basis.html (1529B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>basis of percentage widths</title> 5 <style type="text/css"> 6 7 td { border: 3px inset blue; } 8 9 </style> 10 </head> 11 <body> 12 13 <!-- 14 15 The difference between the border-box width of the table and the width allocated to the columns is: 16 17 2px = table border-left-width 18 9px = table padding-left 19 25px = 5 * table border-spacing-x 20 5px = table padding-right 21 2px = table border-left-width 22 ================================= 23 43px 24 25 --> 26 27 <table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px"> 28 <tr> 29 <td width="25%">x</td> 30 <td width="38">x</td> 31 <td><div style="width:38px">x</div></td> 32 <td><div style="width:38px">x</div></td> 33 </tr> 34 </table> 35 36 <table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px" width="243"> 37 <tr> 38 <td width="25%">x</td> 39 <td width="38">x</td> 40 <td><div style="width:38px">x</div></td> 41 <td><div style="width:38px">x</div></td> 42 </tr> 43 </table> 44 45 <table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px" width="443"> 46 <tr> 47 <td width="25%">x</td> 48 <td width="38">x</td> 49 <td><div style="width:38px">x</div></td> 50 <td><div style="width:38px">x</div></td> 51 </tr> 52 </table> 53 54 <table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px" width="223"> 55 <tr> 56 <td width="25%">x</td> 57 <td width="38">x</td> 58 <td><div style="width:38px">x</div></td> 59 <td><div style="width:38px">x</div></td> 60 </tr> 61 </table> 62 63 </body> 64 </html>