It is the example HTML file.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table id="tableLineInformation" width="940"
class="scrollTable">
<thead class="fixedHeader">
<tr id="headTR">
<th>rrrr</th>
<th>eeee</th>
<th>wwww</th>
<th>qqqq</th>
</tr>
</thead>
<tbody class="scrollContent">
<span jwcid="@For" source="ognl:fff"
value="eee">
<tr>
<td><span jwcid="@Insert"
value="ognl:ddd"/></td>
<td><span jwcid="@InsertText"
value="ognl:ccc"/></td>
<td><span jwcid="@InsertText"
value="ognl:bbb"/></td>
<td><span jwcid="@InsertText"
value="ognl:aaa"/></td>
</tr>
</span>
</tbody>
</table>
</div>
</body>
</html>
2006/3/2, Ryan Pan <[EMAIL PROTECTED]>:
>
> Hi all,
> Is there anyone who can help me to solve this problem?
> I download an CSS file from Internet which can make a scrollable table
> with fixed header,and I tried for an normal HTML file it is okay.But when
> I changed it to tapestry and visit it through Tomcat,I 've got a abnormal
> layout of HTML,the header of the table moved to somewhere it was not ought
> to be.So I guess there may be something wrong with render of tapestry.
> Who can tell me why its appearance was different while using some CSS
> file and HTML file?(I attached the css file as below)
>
> Thanks,
> Ryan.
>
> Note:
> Below is the content of CSS file:
> /* Terence Ordona, portal[AT]imaputz[DOT]com */
> /* http://creativecommons.org/licenses/by-sa/2.0/ */
>
> /* begin some basic styling here */
>
> /* end basic styling */
>
> /* define height and width of scrollable area. Add 16px to width for
> scrollbar */
> div.tableContainer {
> clear: both;
> border: 1px solid #963;
> height: 245px;
> overflow: scroll;
> width: 956px
> }
>
> /* Reset overflow value to hidden for all non-IE browsers. */
> html>body div.tableContainer {
> overflow: hidden;
> width: 956px
> }
>
> /* define width of table. IE browsers only */
> div.tableContainer table {
> float: left;
> width: 940px
> }
>
> /* define width of table. Add 16px to width for scrollbar. */
> /* All other non-IE browsers. */
> html>body div.tableContainer table {
> width: 956px
> }
>
> /* set table header to a fixed position. WinIE 6.xonly
> */
> /* In WinIE 6.x, any element with a position property set to relative and
> is a child of */
> /* an element that has an overflow property set, the relative value
> translates into fixed. */
> /* Ex: parent element DIV with a class of tableContainer has an overflow
> property set to auto */
> thead.fixedHeader tr {
> position: relative;
> }
>
> /* set THEAD element to have block level attributes. All other non-IE
> browsers */
> /* this enables overflow to work on TBODY element. All other non-IE,
> non-Mozilla browsers */
> html>body thead.fixedHeader tr {
> display: block
> }
>
> /* make the TH elements pretty */
> thead.fixedHeader th {
> background: #C96;
> border-left: 1px solid #EB8;
> border-right: 1px solid #B74;
> border-top: 1px solid #EB8;
> font-weight: normal;
> padding: 4px 3px;
> text-align: left
> }
>
> /* make the A elements pretty. makes for nice clickable
> headers */
> thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited
> {
> /*color: #FFF;*/
> display: block;
> text-decoration: none;
> /*width: 100%*/
> }
>
> /* make the A elements pretty. makes for nice clickable
> headers */
> /* WARNING: swapping the background on hover may cause problems in WinIE
> 6.x */
> thead.fixedHeader a:hover {
> /*color: #FFF;*/
> display: block;
> text-decoration: underline;
> /*width: 100%*/
> }
>
> /* define the table content to be
> scrollable */
> /* set TBODY element to have block level attributes. All other non-IE
> browsers */
> /* this enables overflow to work on TBODY element. All other non-IE,
> non-Mozilla browsers */
> /* induced side effect is that child TDs no longer accept width:
> auto */
> html>body tbody.scrollContent {
> display: block;
> height: 262px;
> overflow: auto;
> /*width: 100%*/
> }
>
> /* make TD elements pretty. Provide alternating classes for striping the
> table */
> /* http://www.alistapart.com/articles/zebratables/
> */
> tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
> /*background: #FFF;*/
> border-bottom: none;
> border-left: none;
> border-right: 1px solid #CCC;
> border-top: 1px solid #DDD;
> padding: 2px 3px 3px 4px
> }
>
> tbody.scrollContent tr.alternateRow td {
> /*background: #EEE;*/
> border-bottom: none;
> border-left: none;
> border-right: 1px solid #CCC;
> border-top: 1px solid #DDD;
> padding: 2px 3px 3px 4px
> }
>
> /* define width of TH elements: 1st, 2nd, and 3rd respectively.
> */
> /* Add 16px to last TH for scrollbar padding. All other non-IE browsers.
> */
> /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors
> */
> html>body thead.fixedHeader th {
> /*width: 200px*/
> }
>
> html>body thead.fixedHeader th + th {
> /*width: 240px*/
> }
>
> html>body thead.fixedHeader th + th + th {
> /*width: 316px*/
> }
>
> /* define width of TD elements: 1st, 2nd, and 3rd respectively.
> */
> /* All other non-IE browsers.
> */
> /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors
> */
> html>body tbody.scrollContent td {
> /*width: 200px*/
> }
>
> html>body tbody.scrollContent td + td {
> /*width: 240px*/
> }
>
> html>body tbody.scrollContent td + td + td {
> /*width: 300px*/
> }
>
