Ok... there has got to be an easier way of doing X-Browser fixed tables. I'm trying to output tabular data that has a fixed header and fixed footer, similar to excel, and have the content's overflow scroll vertically. In Firefox, this is easy to do, as Firefox supports TBODY overflow-x and overflow-y properties. IE doesn't, and tables that look beautiful in FFX look terrible in IE.

The best solution I've found is to break up the tables into separate layers, and have the middle layer set auto overflow. It works in both, but is tedious to implement and difficult to teach others.

Thanks!

Jordan

Here is the code I'm using:

Method 1 - TBODY Overflow

<style type="text/css">
div.tableContainer {
    width: 100%;        /* table width will be 99% of this*/
    height: 415px;     /* must be greater than tbody*/
        overflow: auto;
    align: left;
   
    }

div.tableContainer table.DataGridTable {
    width: 99%;        /*100% of container produces horiz. scroll in Mozilla*/
    }
   
div.tableContainer table.DataGridTable>tbody    {  /* child selector syntax which IE6 and older do not support*/
   
    overflow-x: hidden;
    height: 335px;
    overflow-y: auto;
    }
   
div.tableContainer thead th.DataGridTH    {
    position:relative;
    top: _expression_(document.getElementById("data").scrollTop-2); /*IE5+ only*/
    }
   
div.tableContainer td:last-child {padding-right: 16px;} /*prevent Mozilla scrollbar from hiding cell content*/
</style>

<table>
    <thead>
       <th></th>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Method 2:

.fixedTableContainer
{
    position:relative;
}

.fixedTableContainer div.FTCheader
{
    height: 19px;
    position:absolute;
    z-index:1;   
}

.fixedTableContainer div.FTCbody
{
    overflow-y: auto;
    overflow-x: hidden;
    overflow: auto;
    position:relative;
    top: 15px;
    z-index:0;   
}

.fixedTableContainer div.FTCfooter
{
    height: 22px;
    top: 15px;
    position:relative;
    z-index:1;
}

<div id="tableContainer" class="fixedTableContainer" style="width: 517px;">
                    <div id="FTCheader" class="FTCheader">
                      <table cellpadding="0" cellspacing="0" border="0" class="fixedTable" style="width: 500px;">
                            <thead>
                            </thead>
                      </table>
                   </div>
                   <div id="FTCbody" class="FTCbody" style="width: 517px; height: 251px; top:21px;">
                        <table cellpadding="0" cellspacing="0" class="fixedTable" style="width: 500px;">
                            <tbody>
                            </tbody>
                         </table>
                      </div>
                    <div id="FTCfooter" class="FTCfooter">
                        <table cellpadding="0" cellspacing="0" class="fixedTable" style="width: 500px;">
                            <tfoot>
                             </tfoot>
                         </table>
                   </div>
                </div>


 
_______________________________________________
Reply to DFWCFUG: 
  [email protected]
Subscribe/Unsubscribe: 
  http://lists1.safesecureweb.com/mailman/listinfo/list
List Archives: 
    http://www.mail-archive.com/list%40list.dfwcfug.org/             
  http://www.mail-archive.com/list%40dfwcfug.org/
DFWCFUG Sponsors: 
  www.HostMySite.com 
  www.teksystems.com/

Reply via email to