I tried looking for this answer and saw questions close to it but unable to get a resolution to my problem @ HTML table headers always visible at top of window when viewing a large table.
Basically we have inherited a XSL page which has 2 HTML tables and when you hover over an row on the main table that has a value “yes” it shows a hidden 2nd table relating to that row on the right while if “no” it doesnt show anything. However if you have a lot of results being shown through the XSL, when you scroll down you will be unable to see the table.
I am just wondering if there is a way to force the 1 right hidden table to stay at the top of the screen everytime you hover over value yes even if it means to have the XSL result set to have a scroll bar instead?
Hope i have made myself clear, please see an extract of my code that im having trouble with.
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<script>
function showme(show)
{
<xsl:for-each select="root/Action">document.getElementById('<xsl:value-of select="@Type"/>').style.display='none';
</xsl:for-each>
document.getElementById('summary').style.display='none';
document.getElementById(show).style.display='inline';
}
</script>
<xsl:for-each select="root/Action">
<span style="display:none">
<xsl:attribute name="id"><xsl:value-of select="@Type"/></xsl:attribute>
<table class="lgreenback"><tr class="small"><td class="green">Details for: <b><xsl:value-of select="@Type"/> Actions:</b>   <a onmouseover="style.cursor='hand'" onclick="showme('summary')"><< Back</a></td></tr></table><br/>
<table cellspacing="0" cellpadding="2" class="bdrnw">
<tr class="small">
<td class="lgheadercell">Date:</td>
<td class="lgheadercell"> </td>
<td class="lgheadercell">Time:</td>
<td class="lgheadercell"> </td>
<td class="lgheadercell">Done By:</td>
<td class="lgheadercell"> </td>
<td class="lgheadercell">B&S Ref:</td>
<td class="lgheadercell"> </td>
<td class="lgheadercell">Assocs:</td>
</tr>
<xsl:for-each select="Case">
<tr class="smallerstill">
<xsl:choose>
<xsl:when test="count(Linked) > 0">
<xsl:attribute name="onmouseover">style.background='#f6f6f6', style.cursor='hand', document.getElementById('<xsl:value-of select="@id"/>').style.display='inline'</xsl:attribute>
<xsl:attribute name="onmouseout">style.background='#ffffff', document.getElementById('<xsl:value-of select="@id"/>').style.display='none'</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="onmouseover">style.background='#f6f6f6', style.cursor='hand'</xsl:attribute>
<xsl:attribute name="onmouseout">style.background='#ffffff'</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<td><xsl:value-of select="Date"/></td>
<td></td>
<td><xsl:value-of select="Time"/></td>
<td></td>
<td><xsl:value-of select="Realname"/></td>
<td></td>
<td><xsl:value-of select="substring(Client,1,3)" />-<xsl:value-of select="substring(Client,4,1)" /> <xsl:value-of select="Ref"/></td>
<td></td>
<td align="center">
<xsl:choose>
<xsl:when test="count(Linked) > 0">Yes</xsl:when>
<xsl:otherwise>No</xsl:otherwise>
</xsl:choose>
</td>
</tr>
</xsl:for-each>
</table>
</span>
</xsl:for-each>
</td><td valign="top" align="left">
<img src="../images/spacer.gif" height="41" width="120"/>
<xsl:for-each select="/root/Action/Case[count(Linked) > 0]">
<span style="display:none">
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<table cellspacing="0" cellpadding="2" class="bdrnw">
<tr class="small"><td class="lgheadercell">Assocs:</td></tr>
<xsl:for-each select="Linked">
<tr class="smallerstill"><td><xsl:value-of select="substring(@cl,1,3)" />-<xsl:value-of select="substring(@cl,4,1)" /> <xsl:value-of select="@nm"/></td></tr>
</xsl:for-each>
</table>
</span>
</xsl:for-each>
</td></tr></table>
</html>
</xsl:template>
</xsl:stylesheet>
Let me know if you need anything else.
Thanks,
Kevin
Use the CSS position:fixed property on the right-hand table, or a <div> around it.
CSS Example
References