added background image.

made one table relatively positioned.
added opacity to transparent scrolled table.

webshell/tests/viewer/samples/test4.html

@@ -4,7 +4,7 @@
    <META NAME="GENERATOR" CONTENT="Mozilla/4.09 [en] (WinNT; U) [Netscape]">
    <TITLE>test4</TITLE>
 <STYLE>
-BODY { font-size: 12pt; }
+BODY { font-size: 12pt; background-image: url(bg.jpg); }
 </STYLE>
 <meta name="crc" content=250397440>
 </HEAD>
@@ -15,9 +15,9 @@ Example 4: Some simple tables.</H1>
 
 <TABLE BORDER >
 <TR>
-<TH BACKGROUND="bg.jpg">Color&nbsp;</TH>
+<TH BACKGROUND="rock_gra.gif">Color&nbsp;</TH>
 
-<TH BACKGROUND="bg.jpg">Meaning&nbsp;</TH>
+<TH BACKGROUND="rock_gra.gif">Meaning&nbsp;</TH>
 </TR>
 
 <TR>
@@ -113,6 +113,7 @@ layout. This should be long enough.</TD>
 </TR>
 </TABLE><br>
 &nbsp;
+<div style="position: relative; top: 190px">
 <table cellpadding=2 style="border-collapse:collapse">
 <CAPTION ALIGN=BOTTOM>Table 4 has this bottom caption. The table has specified
 column widths and collapsing borders.</CAPTION>
@@ -148,6 +149,7 @@ column widths and collapsing borders.</CAPTION>
 </tr>
 </tbody>
 </TABLE>
+</div>
 
 <BR>
 <table>
@@ -155,16 +157,32 @@ column widths and collapsing borders.</CAPTION>
 <thead>
 <tr><td colspan=2 style="font-size: 8pt; font-weight: bold">HEADER
 </thead>
+
+<tbody style="overflow: auto; height: 200px; border: 1px solid black">
+<tr><td><span style="opacity: 50%; font-size: 16pt; color: red; background-color: cyan">cell-00</span><td>cell-01<td>cell-02<td>cell-03
+<tr><td>cell-10<td><span style="opacity: 50%; font-size: 16pt; color: green; background-color: purple">cell-11</span><td>cell-12<td>cell-13
+<tr><td>cell-20<td>cell-21<td><span style="opacity: 50%; font-size: 16pt; color: yellow; background-color: blue">cell-22</span><td>cell-23
+<tr><td>cell-30<td>cell-31<td>cell-32<td><span style="opacity: 50%; font-size: 16pt; color: purple; background-color: green">cell-33</span>
+<tr><td><span style="opacity: 50%; font-size: 16pt; color: red">cell-40</span><td>cell-41<td>cell-42<td>cell-43
+<tr><td>cell-50<td><span style="opacity: 50%; font-size: 16pt; color: green">cell-51</span><td>cell-52<td>cell-53
+<tr><td>cell-60<td>cell-61<td><span style="opacity: 50%; font-size: 16pt; color: yellow">cell-62</span><td>cell-63
+<tr><td>cell-70<td>cell-71<td>cell-72<td><span style="opacity: 50%; font-size: 16pt; color: purple">cell-73</span>
+<tr><td><span style="opacity: 50%; font-size: 16pt; color: red; background-color: cyan">cell-80</span><td>cell-81<td>cell-82<td>cell-83
+<tr><td>cell-90<td><span style="opacity: 50%; font-size: 16pt; color: green; background-color: purple">cell-91</span><td>cell-92<td>cell-93
+<tr><td>cell-a0<td>cell-a1<td><span style="opacity: 50%; font-size: 16pt; color: yellow; background-color: blue">cell-a2</span><td>cell-a3
+<tr><td>cell-b0<td>cell-b1<td>cell-b2<td><span style="opacity: 50%; font-size: 16pt; color: purple; background-color: green">cell-b3</span>
+<tr><td><span style="opacity: 50%; font-size: 16pt; color: red">cell-c0</span><td>cell-c1<td>cell-c2<td>cell-c3
+<tr><td>cell-d0<td><span style="opacity: 50%; font-size: 16pt; color: green">cell-d1</span><td>cell-d2<td>cell-d3
+<tr><td>cell-e0<td>cell-e1<td><span style="opacity: 50%; font-size: 16pt; color: yellow">cell-e2</span><td>cell-e3
+<tr><td>cell-f0<td>cell-f1<td>cell-f2<td><span style="opacity: 50%; font-size: 16pt; color: purple">cell-f3</span>
+</tr>
+</tbody>
+
 <tfoot>
 <tr><td colspan=2 style="font-size: 8pt; font-weight: bold">FOOTER
 </tfoot>
-<tbody style="overflow: auto; height: 60px; border: 1px solid black;">
-<tr><td>cell-00<td>cell-01
-<tr><td>cell-10<td>cell-11
-<tr><td>cell-20<td>cell-21
-<tr><td>cell-30<td>cell-31
-</tr>
-</tbody>
+
+<CAPTION ALIGN=BOTTOM>Table 5 has a scrolling tbody.</CAPTION>
 </table>
 
 <BR>