Two divs, two tables - ex#2

Two divs, two tables side by side. I want my table to scroll, but I want my column headers to lock. I used a HEADER div with a Table that contains ONLY the caption and thead col headers.

by bob m

HTML

<div id="pfcontainer">    
    <div class="floatleft">
        <div class="PortfolioList_hdr"> <!-- COLUMN HEADERS ! -->
               <table id="pftable_hdr">
                <caption>Portfolio Definitions</caption>
                <thead>
                    <tr>
                        <th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>                    
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>             
        <div class="PortfolioList"> <!-- PORTFOLIO TABLE CONTENTS ! -->
            <table id="pftable">
                           <tbody>
<tr style="background-color: rgb(166, 219, 237);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/19/2012</td><td>1D 99</td><td align="right">19,010.56</td></tr><tr style="background-color: rgb(199, 209, 214);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/20/2012</td><td>1D Mean</td><td align="right">73.84</td></tr><tr style="background-color: rgb(166, 219, 237);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/21/2012</td><td>1D SD</td><td align="right">6,771.48</td></tr><tr style="background-color: rgb(199, 209, 214);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/22/2012</td><td>1D ETL 99</td><td align="right">22,020.76</td></tr><tr style="background-color: rgb(166, 219, 237);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/23/2012</td><td>5D 99</td><td align="right">36,815.73</td></tr><tr style="background-color: rgb(199, 209, 214);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/24/2012</td><td>5D...

CSS

<style type="text/css">
    div.floatleft
    {
        float:left;
        width:680px;
    }
    div.floatright
    {
        float:right;
        width:680px;  
    }
    div.PortfolioList_hdr
    {   /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
      height:50px;  position: static; background-color: #7ac0da;
    }
    div.PortfolioList  
    {   /* bkgrnd color is set in Site.css */
        height:300px;  position: static;  overflow-y:auto;            
    }
    div.TradeContrib_hdr
    {   /* this div used as a fixed column header above the Trade Contrib table */
         position: static; background-color: #7ac0da;
    }                      
    div.TradeContrib
    {
        height:200px; overflow-y:auto;
    }
    
    table.contribtable {  /* Trade Contribution table */
            width: 650px;
            border-collapse: collapse; 
            background-color:#a6dbed;                       
    }
    
    table {
            width: 660px;
            border-collapse: collapse;                        
        }
        caption
        {
            background-color: #7ac0da ; /*blue-green*/
            font-weight:bold;
            color: #808080;
        }
        td, th {
            padding: 5px 10px;
        }
        thead tr
        {
          /*position:fixed;  */    /* causes table headers are misaligned ! */
        }
        thead th {
            background-color:  #7ac0da ; /*blue-green*/
            color: #fff; /* text color*/     
        }        
        tbody tr {
            border-top: 1px dotted #D8D5D5;
        }
        
        tbody td {
            border: 1px dotted #D8D5D5;
            border-width: 0px 1px;            
            text-overflow:ellipsis;
        }        
        tbody tr:first-child {
            border-top: none;
        }
        tr:nth-child(odd)
        {
            background-color: #a6dbed; /*aqua*/
        }
            tr:nth-child(even)
   ...