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