fast/table/overflowHidden.html

<html>
<body>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="position:absolute; top:90px; width:600px; background-color:cyan">With absolute positioning on div.</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="width:600px; background-color:cyan; opacity:0.50;">With opacity on div.</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; background-color:grey; opacity:0.50;">
<div style="width:600px; background-color:cyan">With opacity on cell.</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="width:300px; margin-top:-20px; background-color:lime">
<div style="width:600px; background-color:green">Test</div>
</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="width:300px; margin-top:-20px; background-color:lime">
<div style="width:600px; background-color:green">Reverse Test</div>
</div>
</td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="width:300px; margin-top:-20px; background-color:lime">
<div style="width:600px; background-color:green">Stacked Test</div>
</div>
</td>
<td><div style="height:100px; background-color:purple"></div></td>
</tr>
<tr valign=middle>
<td><div style="height:100px; background-color:purple"></div></td>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="width:300px; margin-top:-20px; background-color:lime">
<div style="width:600px; background-color:green">Reverse</div>
</div>
</td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="position:relative; width:600px; background-color:orange">With relative positioning on div.</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; position:relative; background-color:grey">
<div style="width:600px; background-color:pink">With relative positioning on cell.</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:hidden; position:relative; left:100px; background-color:grey">
<div style="width:600px; background-color:pink">With relative positioning and an offset on cell.</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<div style="display:table">
<div style="display:table-row;">
<div style="display:table-cell;vertical-align:middle; overflow:hidden">
<div style="width:300px">
<div style="width:600px; background-color:orange">With display:table-cell</div>
</div>
</div>
<div style="display:table-cell"><div style="height:100px;width:100px; background-color:purple"></div></div>
</div>
</div>

<br><br>

<div style="display:table">
<div style="display:table-row;">
<div style="position:relative; left:100px; display:table-cell;vertical-align:middle; overflow:hidden">
<div style="width:300px">
<div style="width:600px; background-color:orange">With display:table-cell + relative positioning</div>
</div>
</div>
<div style="display:table-cell"><div style="height:100px;width:100px; background-color:purple"></div></div>
</div>
</div>

<br><br>

<table border=5 style="border-collapse:collapse">
<tr valign=middle>
<td width=300 style="overflow:hidden; background-color:grey">
<div style="width:600px; background-color:yellow">Test with border-collapse:collapse</div>
</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=5 style="border-collapse:collapse">
<tr valign=middle>
<td width=300 style="overflow:hidden;">
<div style="width:600px; background-color:yellow">Test with border-collapse:collapse no color</div>
</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:auto; background-color:grey">
<div style="width:300px; margin-top:-20px; background-color:lime">
<div style="width:600px; background-color:green">Test with overflow:auto</div>
</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table border=2>
<tr valign=middle>
<td width=300 style="overflow:scroll; background-color:grey">
<div style="width:300px; margin-top:-20px; background-color:lime">
<div style="width:600px; background-color:green">Test with overflow:scroll</div>
</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

<br><br>

<table>
<tr valign=middle>
<td width=300 style="overflow:auto; background-color:grey; border: 30px solid black">
<div style="width:300px; background-color:lime">
<div style="width:600px; background-color:green">Test with overflow:auto</div>
</div>
</td>
<td><div style="height:100px;width:100px; background-color:purple"></div></td>
</tr>
</table>

</body>
</html>