Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<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-lr; }
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 */
position: relative;
height: 52px;
width: 24px;
}
div#reference2nd
{
background-color: olive;
color: olive;
right: 24px;
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: 48px;
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;
right: 72px;
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">
<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 id="reference1st">ref</div>
<div id="reference2nd">ref</div>
<div id="reference3rd">ref</div>
<div id="reference4th">ref</div>
</div>
</body>
</html>