Closed Thread Icon

Topic awaiting preservation: Scrolling in table body Pages that link to <a href="https://ozoneasylum.com/backlink?for=8984" title="Pages that link to Topic awaiting preservation: Scrolling in table body" rel="nofollow" >Topic awaiting preservation: Scrolling in table body\
 
Author Thread
Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-11-2004 22:25

Hi all,
The following code will enable crolling on the table body (the header will be remain in position).
The code works in IE only (NS/Mozilla behave just like a regular table).
Any ideas how to make it work in NS/Mozilla?

<HTML>
<style>
.tHead {COLOR: black;BACKGROUND-COLOR:red;}
.tBody {COLOR: white; BACKGROUND-COLOR:blue;}
</style>
<BODY>
<DIV id=t1 style="OVERFLOW: auto; HEIGHT: 70px;">
<TABLE width="100%">
<THEAD >
<TR class=tHead style="POSITION: relative; TOP: expression(document.getElementById('t1').scrollTop); width:100%">
<TD>name</TD><TD>age</TD><TD>salary</TD>
</TR>
</THEAD>
<TBODY >
<TR class=tBody>
<TD>AAA</TD><TD>10</TD><TD>1000</TD>
</TR>
<TR class=tBody>
<TD>BBB</TD><TD>20</TD><TD>2000</TD>
</TR>
<TR class=tBody>
<TD>CCC</TD><TD>30</TD><TD>3000</TD>
</TR>
<TR class=tBody>
<TD>DDD</TD><TD>40</TD><TD>4000</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>

Yossi Admon
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 01-11-2004 23:28

no javascript necessary - html and css can do it all on their own -
http://in-dented.com/temp/ozone/table.html

Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-12-2004 07:40

Thanks.

I understand there is no one solution for NS/IE but different solutions for each (NS solution looks bad in IE).
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 01-12-2004 14:13

Hmm.

I'm kind of stumped.

I had simply assumed that IE would be able to handle this, as any standards compliant browser should.

Tried a few things, couldn't get it to work properly - sorry. I'm sure some combo of Javascript/CSS will be able to make it work though.




[This message has been edited by DL-44 (edited 01-12-2004).]
poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

 posted posted 01-12-2004 17:07

I've tested the following code with IE6.0, IE5.01, IE5.5, FB0.7, MZ1.4

code:
<html>

<head>

<style type="text/css">



#container

{

    width:384px;



    margin:0;

    padding:0;

}

#container ul

{

    list-type-style:none;

    padding:0;

    margin:0:

}

#container li

{

    float:left;

    display:inline;

    width:122px;

    text-align:center;

    margin:0 1px 1px 0;

}

#header, #content

{

    clear:both;

    width:100%;

}

#content

{

    height:48px;

    overflow:auto;

}

#header li

{

    color:black;

    background:red;

}

#content li

{

    color:white;

    background:blue;

}



</style>

</head>

<body>



    <div id="container">



        <div id="header">

            <ul>

                <li>name</li>

                <li>age</li>

                <li>salary</li>

            </ul>

        </div>



        <div id="content">

            <ul>

                <li>AAA</li>

                <li>10</li>

                <li>1000</li>



                <li>BBB</li>

                <li>20</li>

                <li>2000</li>



                <li>CCC</li>

                <li>30</li>

                <li>3000</li>



                <li>DDD</li>

                <li>40</li>

                <li>4000</li>

            </ul>

        </div>



    </div>



</body>

</html>

Notice that you can replace the big UL in the "content" DIV by 3 ULs.
Hope that helps.

[edit] I've set the width of the LI to 122px to get the same column size in the "header" and "content". If you put 33% the scrollbar decrease a little the size of "content" column. [/edit]



[This message has been edited by poi (edited 01-12-2004).]

[This message has been edited by poi (edited 01-21-2004).]
Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-12-2004 21:51

poi: it looks very interesting but the question was on a table anyway it is not working perfect in IE (the salary cell is missing) and in NS (first row is blank).

DL-44: there is another problem with the NS solution, try it with only 2 rows in the table (the rows became wider).

Regards,
Yossi Admon
poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

 posted posted 01-12-2004 22:07

Yossi Admon: Actually, you can easilly replace the ULs in my code by some 3 columns table. The scrolling is simply done thanks to the overflow:auto; rule applied to the "content" DIV.

In which version of IE do you have only 2 cells in the header ? Could you post a screenshot. It's weird 'coz it worked with 3 versions of IE here and that whatever the resolution of the window.

To fix the blank row in Gecko, add the display:inline; rule to the #container ul selector in the CSS.



[This message has been edited by poi (edited 01-12-2004).]

[This message has been edited by poi (edited 01-21-2004).]
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 01-12-2004 22:24
quote:
try it with only 2 rows in the table (the rows became wider).



Well, actually they become taller. That is becuase they expand to fit the height specified for the <tbody>. That number is an arbitrary number that I picked, and obviously you would have to adapt any code anyone is going to give you to suit your needs - as we don't know what your needs are, and are simply trying to solve a problem, that part is going to be up to you.


Poi -

quote:
Yossi Admon: Actually, you can easilly replace the ULs in my code by some 3 columns table. The scrolling is simply done thanks to the overflow:auto; rule applied to the "content" DIV.



To keep this as one single table, that method does not work (it's essentially what I did). The tbody element won't accept the overflow:auto; in IE it seems, and various placements of div's set to scroll did not work for me either.

Using a list to accomplish this seems very awkward, and I am sure there has to be a better way, that does not involve splitting the table into two.

Still thinking.....
poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

 posted posted 01-12-2004 23:38

DL-44: it's sad that that crap of IE do not accept the overflow:auto; rule on the TBODY like you did 'coz it's the most natural way to do achieve that effect.

Actually I doubt it's possible to do this, in a simple elegant and cross-browsers way, without separating the header of the content. You could use one UL per column, or use 2 tables :

code:
<html>

<head>

<style type="text/css">

#container

{

    width:384px;

    margin:0;

    padding:0;

}

#container div

{

    swidth:100%;

    sdisplay:block;

    clear:both;

}

#container .column

{

    display:inline;

    float:left;

    width:120px;

    margin:0;

    padding:0;

    border-right:1px solid #fff;

    text-align:center;

}

#header .column

{

    color:black;

    background:red;

}

#content

{

    height:48px;

    overflow:auto;

}

#content .column

{

    color:white;

    background:blue;

}

.column ul

{

    list-style-type:none;

    width:100%;

    padding:0;

    margin:0;

}

</style>

</head>

<body>

    <div id="container">

        <div id="header">

            <span class="column">name</span>

            <span class="column">age</span>

            <span class="column">salary</span>

        </div>

        <div id="content">

            <span class="column">

                <ul>

                    <li>AAA</li>

                    <li>BBB</li>

                    <li>CCC</li>

                    <li>DDD</li>

                </ul>

            </span>

            <span class="column">

                <ul>

                    <li>10</li>

                    <li>20</li>

                    <li>30</li>

                    <li>40</li>

                </ul>

            </span>

            <span class="column">

                <ul>

                    <li>1000</li>

                    <li>2000</li>

                    <li>3000</li>

                    <li>4000</li>

                </ul>

            </span>

        </div>

    </div>

</body>

</html>

Alas we don't know if it's acceptable for Yossi to separate the header from the content.



[This message has been edited by poi (edited 01-12-2004).]

[This message has been edited by poi (edited 01-21-2004).]
Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-13-2004 08:22

It is important keeping the solution stracture to be under a TABLE tag (a lot of utilities where written to table like sorting, filtering highlight rows...) therefor I prefer DL-44 solution (till someone will find something better).

We wrote a generic table builder tag in order to keep on the same look and feel in all the data tables we are displaying.
It is important keeping the solution structure to be under a TABLE tag (a lot of utilities where written to table like sorting, filtering highlight rows...) therefor I prefer DL-44 solution (till someone will find something better).

We wrote a generic table builder tag in order to keep on the same look and feel in all the data tables we are displaying.
I think I can solve the height problem (table become taller) by setting the TBODY style dynamic (according to the actual TBODY height).

The main goal of this thread is not only to find solution to my problem but to discuss (and maybe solve) a problem we all experiencing.


Regards,
Yossi Admon
Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

 posted posted 01-14-2004 09:06

Following code will work both for IE and NS/Mozillz

<html>
<head>
<title>table test</title>
<style>
.tHeadRow {COLOR: black;BACKGROUND-COLOR:red;POSITION: relative;TOP: expression(getAbsHeight(this));}
.darkRow {COLOR: white; BACKGROUND-COLOR:blue;}
.lightRow {COLOR: white; BACKGROUND-COLOR:MediumOrchid;}
.tTable {WIDTH: expression(getAbsWidth(this))}
</style>
<script language="javascript">
function getAbsWidth(obj){
try{
return document.getElementById(obj.getAttribute('wrapperId')).offsetWidth-17;
}catch(e){}
}

function getAbsHeight(obj){
try{
return document.getElementById(obj.parentNode.parentNode.getAttribute('wrapperId')).scrollTop;
}catch(e){}
}

function fixTable(baseId, height){
var agent = navigator.userAgent.toLowerCase();
var isNS = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1)));
var baseElem = document.getElementById(baseId);
if(isNS){
if(baseElem.getElementsByTagName("tbody").length > 0 && baseElem.getElementsByTagName("thead").length > 0 && baseElem.getElementsByTagName("table").length > 0){
var theadElem = baseElem.getElementsByTagName("thead").item(0);
var oTable = baseElem.getElementsByTagName("table").item(0);
oTable.style.width = baseElem.offsetWidth;
oTable.width = baseElem.offsetWidth - 16;
var tBody = baseElem.getElementsByTagName("tbody").item(0);
//height = baseElem.offsetHeight - theadElem.offsetHeight - 7;
if(tBody.offsetHeight > height){
tBody.style.overflow = "auto";
tBody.style.height = height + "px";
}
}
} else {
baseElem.style.overflow = "auto";
baseElem.style.height = height + "px";
}
}
</script>
</thead>
<BODY onLoad="fixTable('t1', 70);">
<DIV id=t1 style="width:60%">
<TABLE cellpadding=0 cellspacing=0 wrapperId="t1" class="tTable">
<THEAD>
<TR class=tHeadRow >
<TD>name</TD><TD>age</TD><TD>salary</TD>
</TR>
</THEAD>
<TBODY>
<TR class=darkRow>
<TD>AAA</TD><TD>10</TD><TD>1000</TD>
</TR>
<TR class=lightRow>
<TD>BBB</TD><TD>20</TD><TD>2000</TD>
</TR>
<TR class=darkRow>
<TD>CCC</TD><TD>30</TD><TD>3000</TD>
</TR>
<TR class=lightRow>
<TD>DDD</TD><TD>40</TD><TD>4000</TD>
</TR>
<TR class=darkRow>
<TD>AAA</TD><TD>10</TD><TD>1000</TD>
</TR>
<TR class=lightRow>
<TD>BBB</TD><TD>20</TD><TD>2000</TD>
</TR>
<TR class=darkRow>
<TD>CCC</TD><TD>30</TD><TD>3000</TD>
</TR>
<TR class=lightRow>
<TD>DDD</TD><TD>40</TD><TD>4000</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>





[This message has been edited by Yossi Admon (edited 01-16-2004).]

« Backwards — Onwards »

Show Forum Drop Down Menu