<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> <link rel="match" href="fixed-table-layout-022-ref.htm"> <meta content="" name="flags"> <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> <style type="text/css"> div.test { writing-mode: vertical-rl; } table { border: white solid; border-width: 29px 0px; /* vertical table border height is 58px total */ border-collapse: separate; border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ table-layout: fixed; height: 533px; /* "With this (fast) algorithm, the vertical layout of the table does not depend on the contents of the cells; it only depends on the table's height, the height of the columns, and [table] borders or cell spacing." So, 533px : total table height - 58px : total vertical border-spacing height - 75px : total vertical border-spacing height ======== 400px : total to split among the 4 columns */ } col#first { background-color: fuchsia; height: 13%; /* 400px multiplied by 13% = 52px */ } col#second { background-color: olive; height: 100px; } col#third { background-color: orange; height: 31%; /* 400px multiplied by 31% = 124px */ /* 300px - (52px + 124px) = 124px for last column */ } col#fourth {background-color: lime;} td {padding: 10px 0px; width: 24px; } td#first-cell {color: fuchsia;} td#second-cell {color: olive;} td#third-cell {color: orange;} td#fourth-cell {color: lime;} div {padding: 0px;} div#reference1st { background-color: fuchsia; color: fuchsia; top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ right: 72px; position: relative; height: 52px; width: 24px; } div#reference2nd { background-color: olive; color: olive; right: 48px; top: 111px; /* 29px : border-top of table + 15px : 1st border-spacing + 52px : height of first column + 15px border-spacing ====== 111px */ position: relative; height: 100px; width: 24px; } div#reference3rd { background-color: orange; right: 24px; color: orange; top: 226px; /* 29px : border-top of table + 15px : 1st border-spacing + 52px : height of first column + 15px : 2nd border-spacing + 100px : height of second column + 15px : 3rd border-spacing ======= 226px */ position: relative; height: 124px; width: 24px; } div#reference4th { background-color: lime; color: lime; top: 365px; /* 29px : border-top of table + 15px : 1st border-spacing + 52px : height of first column + 15px : 2nd border-spacing + 100px : height of second column + 15px : 3rd border-spacing + 124px : height of third column + 15px : 4th border-spacing ======= 365px */ position: relative; height: 124px; width: 24px; } </style> </head> <body> <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> <div class="test"> <div id="reference1st">ref</div> <div id="reference2nd">ref</div> <div id="reference3rd">ref</div> <div id="reference4th">ref</div> <table> <col id="first"> <col id="second"> <col id="third"> <col id="fourth"> <tr> <td id="first-cell">1st</td> <td id="second-cell">2nd</td> <td id="third-cell">3rd</td> <td id="fourth-cell">4th</td> </tr> </table> </div> </body> </html>