Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Scrolling table cell 1

Status
Not open for further replies.
Craftor

Craftor

Programmer
Feb 1, 2001
420
NZ
Hi all

I have a table cell that I want to have a scroll bar. I'm currently using a div and specifying the height in pixels - using the overflow:auto; style. Is it possible to do the same thing using a height percentage? I'd rather not have a set height so that the scrollbar can resize dynamically when the page resolution changes.

Hope that made sense!

Thanks as always

Craftor
:cool:
 
Sort by date Sort by votes
Hi Craftor,

Yes, it IS possible. Wrap your scrollable contents in a DIV and make the DIV scrollable.

Define the height of containing cell/row in percentage AND set the height of the DIV to 100% (why 100% : well, that's actually 100% of the element the DIV is inside).

Have a look at this example -or get back to me!!

Code: 
<HTML>
<HEAD>
  <TITLE>Scrolling TABLE Cell</TITLE>
  <STYLE>
    .scrollingDIV {
      height          : 100%;
      overflow        : scroll;
    }
    .myTABLE {
      table-layout    : fixed;
      height          : 100%;
      width           : 100%; 
    }
    .topROW {
      height          : 10%;
      vertical-align  : top;
    }
    .bottomROW {
      vertical-align  : top;
    }
  </STYLE>
</HEAD>
<BODY>
  <TABLE BORDER=&quot;1&quot; CLASS=&quot;myTABLE&quot;>
    <TR CLASS=&quot;topROW&quot;>
      <TD>
        <DIV CLASS=&quot;scrollingDIV&quot;>
          Scrolling TABLE cell<HR>
          01.<BR>
          02.<BR>
          03.<BR>
          04.<BR>
          05.<HR>
          Nothing more to see here ...
        </DIV>
      </TD>
    </TR>
    <TR CLASS=&quot;bottomROW&quot;>
      <TD>
        Bottom-Cell
      </TD>
    </TR>
  </TABLE>
</BODY>
</HTML>

Good Luck §;O)


Jakob
 
Upvote 0 Downvote
Thanks so much Jakob - used your ideas and got it right!
 
Upvote 0 Downvote
Thanks for the * Craftor,

... I forgot to mention, that I've only tested the example in IE5 -better if you test it in IE6, NS, Mozilla and Opera before going live!

Good Luck & Merry Christmas o<§:O)


Jakob
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
929
spamjim
spamjim
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
169
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
174
PeDa
PeDa
lupidol
  • Locked
  • Question
CSS: How can I keep the header of an HTML table fixed while scrolling the page?
Replies
4
Views
154
jbenson001
jbenson001

Part and Inventory Search

Sponsor

Back
Top