Sv: Behålla tabellrubriker vid scrollning

Behålla tabellrubriker vid scrollning

Postades av 2004-03-22 15:42:43 - Thomas Baumgartner, i forum asp - allmänt, Tråden har 2 Kommentarer och lästs av 432 personer

Har en <iframe> som innehåler en sida där en tabell, med tabellrubriker, skrivs ut dynamiskt.
Då det ibland blir många rader blir man tvungen att scrolla.
Hur gör jag för att behålla tabellrubrikerna. Nu försvinner de ju uppåt.

Svara

Sv: Behålla tabellrubriker vid scrollning

Postades av 2004-03-23 00:15:46 - Stefan Brännström

Skriva rubrikerna ovanför ramen?

Svara

Sv: Behålla tabellrubriker vid scrollning

Postades av 2004-03-24 09:45:04 - Magnus Bjurquist

Här kommer en vansinnig massa HTML, hoppas du har överseende med att scrolla som en tok.

Med hjälp av en synkroniseringsfunktion i javascript och att sätta id på nonscroll-elementen går det att få både kolumnrubriker och "radrubriker" att vara ligga kvar när övriga tabellen scrollas.

Svårt att förklara. Kanske enklare att se själv. Varsågod:

<html>
<head>
<style>
#div1
{
overflow: hidden;
height: 350;
}

#div2
{
overflow: hidden;
height: 30;
width: 300;
}

#div3
{
overflow: auto;
height:365;
width: 300;
}
</style>
<script>
window.onload = function ()
{
addScrollSynchronization(document.getElementById("div1"), document.getElementById("div3"), "vertical");
addScrollSynchronization(document.getElementById("div2"), document.getElementById("div3"), "horizontal");
};
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement)
{
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.srcElement.scrollTop;
};

}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction)
{
removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
toElement.attachEvent("onscroll", fromElement._syncScroll);
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement)
{
if (fromElement._syncTo != null)
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);

fromElement._syncTo = null;;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
</script>
</head>

<body leftmargin=15px style="overflow:hidden">
<form name="form1">
<table align=center height="388">
<tr>
<td height="30"> </td><td height="30">
<div id=div2>
<table align=center>
<tr>
<th class=tableHead nowrap width="30">Co1l</th>
<th class=tableHead nowrap width="30">col2</th>
<th class=tableHead nowrap width="30">col3</th>
<th class=tableHead nowrap width="30">col4</th>
<th class=tableHead nowrap width="30">col5</th>
<th class=tableHead nowrap width="30">col6</th>
<th class=tableHead nowrap width="30">col7</th>
<th class=tableHead nowrap width="30">col8</th>
<th class=tableHead nowrap width="30">col9</th>
<th class=tableHead nowrap width="30">col10</th>
<th class=tableHead nowrap width="30" colspan="2">col11</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign=top>
<div id=div1>
<div align="center">
<center>
<table>

<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>1</td>
<td height=23 nowrap>1</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>2</td>
<td height=23 nowrap>2</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>3</td>
<td height=23 nowrap>3</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>4</td>
<td height=23 nowrap>4</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>5</td>
<td height=23 nowrap>5</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>
<tr>
<TD nowrap height=23 ><input type='radio' name='id'></TD>
<td height=23 nowrap>6</td>
<td height=23 nowrap>6</td>
</tr>

</table>
</center>
</div>
</div>
</td>
<td height="350">
<div id=div3 name=div3>
<div align="center">
<center>
<table>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
<tr>
<td nowrap height=23 width="27" >1 </td>
<td nowrap height=23 width="27" >2</td>
<td nowrap height=23 width="27" >3</td>

<td nowrap height=23 width="27" >4</td>

<td nowrap height=23 width="27" >5</td>
<td nowrap height=23 width="27" >6</td>
<td nowrap height=23 width="27" >7</td>
<td nowrap height=23 width="27" >8</td>

<td nowrap height=23 width="27" >9</td>
<td nowrap height=23 width="27" >10</td>
<td nowrap height=23 width="27" >11</td>
</tr>
</td>
</tr>
</table>
</center>
</div>
</div>
</table>
</form>
</body>
</html>

Svara

Behålla tabellrubriker vid scrollning

Sv: Behålla tabellrubriker vid scrollning

Sv: Behålla tabellrubriker vid scrollning

Nyligen

Sidor

Statistik

Kontakta oss