Click to See Complete Forum and Search --> : scrolling bar within a table?
DS9215
12-22-2003, 09:58 PM
I have some nest tables that I'm curious if it's possible to include a scroll bar in only one of the tables? I know how to do it in a frame tag but not sure if it's possible in a table tag. Thanks your assistance everyone!!!
Khalid Ali
12-22-2003, 10:39 PM
If you set the fixed height for table and then use overflow:auto,
It will show a scrollbar when the contents overflow the set height(I hope thats what yo were looking for)
PeOfEo
12-22-2003, 11:31 PM
if that does not work use a div inside of a table cell with this same property mentioned above, because I have heard of certain browsers not using overflow for table cells.
DS9215
12-23-2003, 09:11 AM
I was successful in using the <div> tag but isn't that CSS? Is that going to screw up my page because that's the only CSS I'm using? Is there a way to only have the vertical scroll bar and get rid of the horizontal? I know I'm never satisfied and picky lol!! Thanks for your help!!
DaveSW
12-23-2003, 11:30 AM
the div tag isn't css, but the overflow:auto is.
CSS shouldn't screw up your page unless it's in a really REALLY old browser.
What browser are you using? Most won't produce the horz scollbar.
This code should fix your problem for most IE based browsers I think.
<div style="overflow:auto; overflow-x: hidden;">
contents
</div>
DS9215
12-23-2003, 11:56 AM
Thank you for your assistance that worked perfectly!! I'm using IE 6.0 but just want to make sure that people shopping on my site don't run into complications that's the reason for concern on CSS.
DaveSW
12-23-2003, 01:49 PM
They shouldn't have any problems, but to be absolutely certain I suggest you use the @import rule:
Your code in your page would be:
<div class="scrolling">
contents
</div>
This would go in the head section of your document:
<style type="text/css">
<!--
@import url(real.css);
-->
</style>
And you would have a new file called real.css made in Notepad containing:
.scrolling {
overflow:auto;
overflow-x: hidden;
}
This should then simply hide the code from v4 or below browsers.
Hope this helps