<!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>
<title>CSS Test: border-collapse: separate - HTML/XHTML table set width greater than sum of columns</title>
<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#separated-borders" title="17.6.1 The separated borders model" />
<link rel="match" href="separated-border-model-003b-ref.xht" />
<meta name="assert" content="In the border-collapse: separate model, the width of an HTML/XHTML table is the distance between the left and right table border edges. If the set width of an HTML/XHTML table is greater than the sum of the columns width (plus cell spacing and table borders), then the extra (exceeding) space should be distributed over the columns." />
<style type="text/css"><![CDATA[
table
{
background-color: black;
border-spacing: 50px 0;
table-layout: fixed;
width: 500px;
}
table, td
{
border-left: black solid 11px;
border-right: black solid 17px;
padding: 25px 39px 25px 33px;
}
td {width: 100px;}
/*
11px (table's border-left)
33px (table's padding-left)
50px (left-most border-spacing)
11px (td's border-left)
33px (td's padding-left)
100px (td's set content width)
39px (td's padding-right)
17px (td's border-right)
50px (right-most border-spacing)
39px (table's padding-right)
17px (table's border-right)
-----
400px
Since the set width (500px) for the XHTML/HTML table is greater than the
sum of columns width (400px), then the extra (exceeding) space is distributed
evenly among columns. So, here, the used width for the single td should
be 200px, not 100px.
*/
div
{
background-color: blue;
height: 100px;
width: 500px;
}
]]></style>
</head>
<body>
<p>Test passes if the black and blue rectangles are the <strong>same width</strong>.</p>
<table>
<tr>
<td></td>
</tr>
</table>
<div></div>
</body>
</html>
Codebase Browser
chromium