fixed-table-layout-021-vlr.html (3606B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <title>CSS Test: table-layout fixed - columns with percentage height</title> 5 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 6 <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> 8 <link rel="match" href="fixed-table-layout-021-ref.htm"> 9 <meta content="" name="flags"> 10 <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> 11 <style type="text/css"> 12 div.test { writing-mode: vertical-lr; } 13 table 14 { 15 border: white solid; 16 border-width: 29px 0px; /* vertical table border height is 58px total */ 17 border-collapse: separate; 18 border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ 19 table-layout: fixed; 20 height: 533px; 21 /* 22 "With this (fast) algorithm, the vertical layout of 23 the table does not depend on the contents of the cells; 24 it only depends on the table's height, the height of 25 the columns, and borders or cell spacing." 26 http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout 27 So, 28 533px : total table height 29 - 30 58px : total vertical border height 31 - 32 75px : total vertical border-spacing height 33 ======== 34 400px : total to split among the 4 columns 35 */ 36 } 37 col#first 38 { 39 background-color: fuchsia; 40 height: 13%; 41 /* 400px multiplied by 13% = 52px */ 42 } 43 col#second 44 { 45 background-color: olive; 46 height: 22%; 47 /* 400px multiplied by 22% = 88px */ 48 } 49 col#third 50 { 51 background-color: orange; 52 height: 31%; 53 /* 400px multiplied by 31% = 124px */ 54 /* 55 100% - (13% + 22% + 31%) == 34% for last column 56 */ 57 } 58 td {padding: 10px 0px; width: 24px; } 59 td#first-cell {color: fuchsia;} 60 td#second-cell {color: olive;} 61 td#third-cell {color: orange;} 62 div {padding: 0px;} 63 div#reference1st 64 { 65 background-color: fuchsia; 66 color: fuchsia; 67 top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ 68 position: relative; 69 height: 52px; 70 width: 24px; 71 } 72 div#reference2nd 73 { 74 background-color: olive; 75 color: olive; 76 right: 24px; 77 top: 111px; 78 /* 79 29px : border-top of table 80 + 81 15px : 1st border-spacing 82 + 83 52px : height of first column 84 + 85 15px : 2nd border-spacing 86 ======= 87 111px 88 */ 89 position: relative; 90 height: 88px; 91 width: 24px; 92 } 93 div#reference3rd 94 { 95 background-color: orange; 96 right: 48px; 97 color: orange; 98 top: 214px; 99 /* 100 29px : border-top of table 101 + 102 15px : 1st border-spacing 103 + 104 52px : height of first column 105 + 106 15px : 2nd border-spacing 107 + 108 88px : height of second column 109 + 110 15px : 3rd border-spacing 111 ======= 112 214px 113 */ 114 position: relative; 115 height: 124px; 116 width: 24px; 117 } 118 </style> 119 </head> 120 <body> 121 <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> 122 <div class="test"> 123 <table> 124 <col id="first"> 125 <col id="second"> 126 <col id="third"> 127 <col> 128 <tr> 129 <td id="first-cell">1st</td> 130 <td id="second-cell">2nd</td> 131 <td id="third-cell">3rd</td> 132 <td></td> 133 </tr> 134 </table> 135 <div id="reference1st">ref</div> 136 <div id="reference2nd">ref</div> 137 <div id="reference3rd">ref</div> 138 </div> 139 </body> 140 </html>