troubleshooting Question

Fixed/floating table header with scrollable rows beneath

Avatar of mancini
mancini asked on
JavaScriptCSSHTML
7 Comments1 Solution4225 ViewsLast Modified:
Hello

I was advised to post this under a different section.

Original Qu is at :
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22753714.html

Basically, I want a table where the header row stays stationary while the data rows below scroll down the page.  I currently have the following code that half works, but the column headers are not aligned with the rows below.

Thanks for your help.

here is the HTML so far ::

<style type="text/css">

.tableContainer {
      position: relative;      /* to capture the absolutely positioned table header */
  padding: 0;
      padding-top: 55px;      /* space for the column heads */
      width: 1000px;            
      margin: 0;
      }

/* this enables the table to scroll without scrolling the page */
.innerframe {
      overflow: auto;      
      width: 1000px;      
      height: 448px;            /* height is required */
  margin: 0;
  padding: 0;
  padding-right: 0;
      }

/* position the row of column heads above the table */
.tableContainer thead tr {
      position: absolute;      /* throws the header out of the table */
      top: 0px;
      left: 0px;                  
      }
     
.tableContainer tfoot tr {
      position: absolute;      /* throws the footer out of the table */
      top: 534px;
      left: 0px;                  
      }

</style>

<div class="tableContainer">
<div class="innerframe">
<table  class=dialogbox width="100%" cellspacing="0" cellpadding="6" border="0">
        <thead>
        <tr>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Product ID</B>
          </td>

        <td width="120" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Name</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Factory Lead Time (days)</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Factory Price (USD)</B>

          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>AUD Price</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Past Monthly Avg Sales</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >

           <B>Forecast 4 Month Sales</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Stock on Hand</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>On Order</B>

          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Required Inventory</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Currently SOH or On Order</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >

           <B>Recomm Qty</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>RE-ORDER Qty</B>
          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>Order Cost</B>

          </td>
        <td width="70" class="hstextsm" bgcolor='#dddddd' style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080;" >
           <B>FOB Saving</B>
          </td>
       </tr>
       </thead>
<tbody>
<tr bgcolor='#FFFFFF'>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70>11EF02</td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=120>VOL Easyfit Kids</td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70>120</td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70>0.00</td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70>0.00</td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input type=text name="pmas_11EF02" size=4 value="" onBlur="javascript:update_fmas('11EF02')"></td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input type=text name="fmas_11EF02" size=4 value="" onkeypress="javascript:update_required_qty(this,event,'11EF02')" onBlur="javascript:update_required_qty2('11EF02')"></td>

<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input type=text name="soh_11EF02" size=4 value="" onkeypress="javascript:update_stock_qty(this,event,'11EF02')" onBlur="javascript:update_stock_qty2('11EF02')"></td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top nowrap width=70><input class="readonlybox" readonly type=text value="0" size=2> </td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input class="readonlybox" readonly type=text name="required_qty_11EF02" value="" size=4></td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input class="readonlybox" readonly type=text name="stock_qty_11EF02" value="" size=4></td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input type=text name="recomm_qty_11EF02" size=5 value="" onkeypress="javascript:update_sub(this,event,'11EF02')" onBlur="javascript:update_sub2('11EF02')"></td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input type=text name="qty_11EF02" size=5 value="" onkeypress="javascript:update_sub(this,event,'11EF02')" onBlur="javascript:update_sub2('11EF02')"></td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input readonly class=subtotal type=text name="sub_11EF02" size=6 value=""></td>
<td style="border-top: 1px solid #808080;" class="hstext" valign=top width=70><input readonly class=subtotal type=text name="saving_11EF02" size=6 value=""></td>
</tr>
 </tbody>

    </table>
    </div>
    </div>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros