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/border-collapse-006.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test (Tables): collapsing borders with different widths</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<style>
table { border-collapse: collapse; background: green }
td { padding: 0; background: red; }
td div { height: 25px; background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="float: left; min-width: 200px; background: red">
<!--
> Borders are centered on the grid lines between the cells.
That is, the column needs to be big enough to contain:
- Half of the left border form the 1st row, i.e. 75px.
- Half of the right border form the 2nd row, i.e. 50px.
Therefore, the column is max(75px, 50px) = 75px wide,
and it goes from position 75px to position 150px.
In the 1st row there is no remaining available space,
so the div becomes 0px wide.
In the 2nd row there are 75px - 50px = 25px of available space,
so the div becomes 25px wide.
-->
<table>
<tr>
<td style="border-left: 150px solid green">
<div></div>
</td>
</tr>
<tr>
<td style="border-right: 100px solid green">
<div></div>
</td>
</tr>
</table>
<!-- Same situation, but with explicit widths on the divs -->
<table>
<tr>
<td style="border-left: 150px solid green">
<div style="width: 0px"></div>
</td>
</tr>
<tr>
<td style="border-right: 100px solid green">
<div style="width: 25px"></div>
</td>
</tr>
</table>
<!-- Same situation, but with the rows swapped -->
<table>
<tr>
<td style="border-right: 100px solid green">
<div></div>
</td>
</tr>
<tr>
<td style="border-left: 150px solid green">
<div></div>
</td>
</tr>
</table>
<!-- Same situation, but with explicit widths and the rows swapped -->
<table>
<tr>
<td style="border-left: 150px solid green">
<div style="width: 0px"></div>
</td>
</tr>
<tr>
<td style="border-right: 100px solid green">
<div style="width: 25px"></div>
</td>
</tr>
</table>
</div>