RE: Re: List box w/ checks using HTML?

This is a MIME message. If you are reading this text, you may want to 
consider changing to a mail reader or gateway that understands how to 
properly handle MIME multipart messages.
--
[ Picked text/plain from multipart/alternative ]
What you need to do is have three tables:
<div id="headerDiv" style="overflow:hidden;">
<table id="header">
</table>
</div>
<div id="bodyDiv" style="overflow:auto;">
 <table id="Body">
  <thead>
   <tr>
    <th> column 1 header </th>
    <th> column 2 header </th>
    <th> column 3 header </th>
   </tr> <!-- obvously these are the headings —>
   <tr style="visibility:hidden;">
    <th nowrap> xxxxxxxxxxxxxxxxxxxxx </th> <!-- the xxxxxxxxx's should be the 
minimum width that you want the column to be —>
    <th nowrap> xxxxxxxxxxxxxxxxxxxxx </th>
    <th nowrap> xxxxxxxxxxxxxxxxxxxxx </th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>[] Item 1</td>
    <td> Item 1 Description </td>
    <td> Item 1 Price </td>
   </tr>
   <tr>
    <td>[] Item 2</td>
    <td> Item 2 Description </td>
    <td> Item 2 Price </td>
   </tr>
   etc.....
  </tbody>
  <tfoot>
   <tr>
    <!-- include the footer contents here —>
   </tr>
   <tr style="visibility:hidden;">
    <td nowrap> xxxxxxxxxxxxxxxxxxxxx </td> <!-- the xxxxxxxxx's should be the 
minimum width that you want the column to be —>
    <td nowrap> xxxxxxxxxxxxxxxxxxxxx </td>
    <td nowrap> xxxxxxxxxxxxxxxxxxxxx </td>
   </tr>
  </tfoot
 </table>
</div>
<div id="footerDiv" style="overflow:hidden;">
<table id="footer">
</table>
</div>
 The header table and the footer table should be empty initially. Surround the 
Body table with the like David suggested. Then in javascript copy the contents 
of the <thead> section into the "header" table and change the <thead> section 
to visibility:hidden in the "body" table and do the same for the footer table. 
If the table is wider than the window you can use the onScroll event of the 
"bodyDiv" to scroll the "headerDiv" and "footerDiv" horizontally.

Here is an example of how to copy the <thead> section.
       var reportHeaderTable = document.getElementById("header");
       var ReportTableObj = document.getElementById("body");
       for (i=ReportTableObj.children.length-1;i>=0;i--)
        {
         if(ReportTableObj.children[i].tagName = "THEAD")
          
reportHeaderTable.insertAdjacentElement("AfterBegin",ReportTableObj.children[i].cloneNode(true));
        }

Joe Lee

>>> David.Morris@plumcreek.com 05/15/2002 09:57:47 >>>
Bob,

Actually, you can get a scroll area in a table with 5.0+ browsers.
Just surround your table with a style like: <div style="overflow:
auto;>
The biggest problem is that the heading will scroll unless you put
it in a separate table.

David Morris