Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/CSS2/tables/separated-border-model-003b.xht - WPT Dashboard Interop Dashboard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>