When a table in the PI Sheet has more than 10 lines the scrolling of the table content is activated. When you scroll down the headers of the table columns get lost because they are also in the scrolling area. This is of course not very user friendly. In the following section I describe a simple stylesheet enhancement that solves this problem. The initial idea came from one of SAP’s customers (thank you Christoph!) and I have added the fix for dropdown lists.

The first location is in the general template for tables called ‘builderrepeat’ (<xsl:template name=”builderrepeat”>) of your XSL. Scroll down to the comment ‘<!– Table body –>’ and insert the following code:

<!-- Table body -->
<DIV ID="_bfw_tab_scroll_" ...
 <TABLE ID="_bfw_tab_body_" ...
  <THEAD>
   <TR ID="_bfw_tab_text_">
   <!-- ### MX_010: Insert Start   ########################################### -->
     <xsl:attribute name="style">position:relative;top:expression(this.offsetParent.scrollTop)</xsl:attribute>
   <!-- ### MX_010: Insert End     ########################################### -->

Please do not split the red coding part into several lines!

This already will probably work for most use cases. However if you are using dropdown lists in your table then the top-most dropdown list element would be scrolled into the title. To avoid this I have added  the following code to hide that element as soon as it reaches the title area:

<xsl:template match="INPUT[ancestor::INSTRUCTION[./@type='repeat' or ./@group]]" mode="repeat">
  <TD CLASS="TABFIELD" ID="_bfw_component_" _BFW_TYPE_="bfwInput">
    <xsl:attribute name="_BFW_KEY_">
      <xsl:value-of select="./@id" />
    </xsl:attribute>
    <xsl:choose>
      <xsl:when test="./HELPVALUE">
        <SPAN ID="_SELECT_">
        <!-- ### MX_010: Replace Delete ########################################### old code below...
          <SELECT STYLE="width:100%" ID="_bfw_field_" CLASS="TIFDINACTIVE" TABINDEX="-1"
          SIZE="1" _BFW_CSS_ACTIVE_="TIFDACTIVE" _BFW_CSS_INACTIVE_="TIFDINACTIVE"
         _BFW_CSS_DEFAULT_="TIFDDEFAULT" _BFW_CSS_ERROR_="TIFDERROR" _BFW_CSS_DISABLED_="TIFDDISABLED">
             ### MX_010: Replace Insert ###########################################
             ... to avoid that select elements are scrolling into the column title -->
          <SELECT STYLE="width:100%; visibility:expression(MX_Hide_Select(this))" ID="_bfw_field_"
            CLASS="TIFDINACTIVE" TABINDEX="-1" SIZE="1" _BFW_CSS_ACTIVE_="TIFDACTIVE"
            _BFW_CSS_INACTIVE_="TIFDINACTIVE" _BFW_CSS_DEFAULT_="TIFDDEFAULT" _BFW_CSS_ERROR_="TIFDERROR"
            _BFW_CSS_DISABLED_="TIFDDISABLED">
       <!-- ### MX_010: Replace End ########################################### -->
    <xsl:for-each select="./HELPVALUE">

As you can see there is also some javascript code involved:

//------------------------------------------------------------------------------------
// MX_010: Table column headers stay at the top
//------------------------------------------------------------------------------------
// This function hides SELECT objects
function MX_Hide_Select(obj) {
 div_scrollTop  = obj.offsetParent.offsetParent.offsetParent.scrollTop;
 line_offsetTop = obj.offsetParent.offsetTop;
 obj_offsetTop  = obj.offsetTop;
  head_height    = obj.offsetParent.offsetParent.firstChild.offsetHeight;
 if (div_scrollTop + head_height > line_offsetTop + obj_offsetTop) {
  return 'hidden';
 } else {
  return 'visible';
 }
}

You have to provide that code in a separate JS file and of course you need to link this JS file in the HTML header definitions in your XSL:

<SCRIPT LANGUAGE=”JavaScript” SRC=”SAPR3-WR-Z_YOUR_JS_FILE.JS”/>

Some remarks:

Using expressions for CSS styles is only possible in Internet Explorer. But since the PI Sheets depends on IE this is not a problem. Due to the constant running of Javascript code these expressions might slow down your performance if you use them a lot. So please use with care!