<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: table-layout fixed - columns with percentage width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test fixed-table-layout-021"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<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="reference/fixed-table-layout-021-ref.xht" />
<meta content="" name="flags" />
<meta content="A column with a percentage width in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert" />
<style type="text/css"><![CDATA[
table, div {font: 1.25em/1 serif;}
table
{
border: white solid;
border-width: 0px 29px; /* horizontal table border width is 58px total */
border-collapse: separate;
border-spacing: 15px 4px; /* horizontal border-spacing width is 75px total */
table-layout: fixed;
width: 533px;
/*
"With this (fast) algorithm, the horizontal layout of
the table does not depend on the contents of the cells;
it only depends on the table's width, the width of
the columns, and borders or cell spacing."
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
So,
533px : total table width
-
58px : total horizontal border width
-
75px : total horizontal border-spacing width
========
400px : total to split among the 4 columns
*/
}
col#first
{
background-color: fuchsia;
width: 13%;
/* 400px multiplied by 13% = 52px */
}
col#second
{
background-color: olive;
width: 22%;
/* 400px multiplied by 22% = 88px */
}
col#third
{
background-color: orange;
width: 31%;
/* 400px multiplied by 31% = 124px */
/*
100% - (13% + 22% + 31%) == 34% for last column
*/
}
td {padding: 1px 10px;}
td#first-cell {color: fuchsia;}
td#second-cell {color: olive;}
td#third-cell {color: orange;}
div {padding: 1px 0px;}
div#reference1st
{
background-color: fuchsia;
color: fuchsia;
left: 44px; /* 29px border-left of table + 15px border-spacing == 44px */
position: relative;
width: 52px;
}
div#reference2nd
{
background-color: olive;
bottom: 1.1em;
color: olive;
left: 111px;
/*
29px : border-left of table
+
15px : 1st border-spacing
+
52px : width of first column
+
15px : 2nd border-spacing
=======
111px
*/
position: relative;
width: 88px;
}
div#reference3rd
{
background-color: orange;
bottom: 2.2em;
color: orange;
left: 214px;
/*
29px : border-left of table
+
15px : 1st border-spacing
+
52px : width of first column
+
15px : 2nd border-spacing
+
88px : width of second column
+
15px : 3rd border-spacing
=======
214px
*/
position: relative;
width: 124px;
}
]]></style>
</head>
<body>
<p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same widths and the same horizontal positions.</p>
<table>
<col id="first" />
<col id="second" />
<col id="third" />
<col />
<tr>
<td id="first-cell">1st</td>
<td id="second-cell">2nd</td>
<td id="third-cell">3rd</td>
<td></td>
</tr>
</table>
<div id="reference1st">ref</div>
<div id="reference2nd">ref</div>
<div id="reference3rd">ref</div>
</body>
</html>