Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<html>
<head>
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
<link rel="match" href="fixed-table-layout-025-ref.html">
<meta name="flags" content="">
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
<style type="text/css">
table
{
writing-mode: vertical-lr;
border-collapse: collapse;
table-layout: fixed;
height: 100px;
}
td#middle-green-cell
{
background-color: green;
border-top: green solid 16px;
border-bottom: green solid 16px;
height: 50%;
}
td#top-red-cell, td#bottom-red-cell {background-color: red;}
td#top-red-cell {border-bottom: red solid 15px;}
td#bottom-red-cell {border-top: red solid 16px;}
td {padding: 9px 50px;}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table>
<tr>
<td id="top-red-cell"></td>
<td id="middle-green-cell"></td>
<td id="bottom-red-cell"></td>
</tr>
</table>
</body>
</html>