468,248 Members | 1,470 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,248 developers. It's quick & easy.

Only Vertical Scroll bar no horizontal bars

Hi,

I am struggling with a problem for sometimes. I need to display a table in
a html and if the height of the table goes beyond 200 px then a vertical
scrollbar should alone appear without any horizontal scroll bar. If the
height of the table is less than 200 px then no scroll bars should appear.
Here is the html below. I tried to wrap the table around a <div> tag but
its doesn't work out as the scroll bar appear close to the scroll bar of
the page rather than close to the table. Further if the height of the
table is less than 200 px (i.e., with fewer number of rows like just 2
rows) then also the scroll bars appear.

Am I missing anything in this? Or Is there any other better solution to
this? I would appreciate any help to solve this problem.

<html><head><title>Table test</title>
<style type="text/css">
body { font-family: arial;}
table { border-color: darkblue; border-style: solid; border-width: 1px;
}
td, th {
font-family: Arial; font-size: 10pt; background-color: grey;
padding: 2px; padding-left: 6px; padding-right: 6px;
}
.section-header{
background-color: darkblue; font-size : 18px; font-weight: bold;
font-style: normal; text-align: left; padding-left: 5px; vertical-align:
middle;
}
</style>
</head>
<body>
<div style="height:200px; overflow:scroll">
<table cellpadding="0" cellspacing="1" width="800px">
<thead>
<tr style="background-color:#008000;color:#ffffff;">
<th class="section-header">name</th>
<th class="section-header">position</th>
<th class="section-header">Number added</th>
<th class="section-header">Number removed</th>
</thead>
<tbody>
<tr><td>aaa</td><td>left</td><td>122-456-789</td><td>122-456-788</td></t
r>
<tr><td>bbb</td><td>left</td><td>123-456-789</td><td>123-456-788</td></t
r>
<tr><td>ccc</td><td>right</td><td>233-456-789</td><td>233-456-788</td></
tr>
<tr><td>ddd</td><td>left</td><td>234-456-789</td><td>234-456-788</td></t
r>
<tr><td>eee</td><td>right</td><td>238-456-789</td><td>238-456-788</td></
tr>
<tr><td>fff</td><td>right</td><td>235-456-789</td><td>235-456-788</td></
tr>
<tr><td>ggg</td><td>left</td><td>236-456-789</td><td>236-456-788</td></t
r>
<tr><td>aaa</td><td>left</td><td>122-456-789</td><td>122-456-788</td></t
r>
<tr><td>bbb</td><td>left</td><td>123-456-789</td><td>123-456-788</td></t
r><tr>
<td>ccc</td><td>right</td><td>233-456-789</td><td>233-456-788</td></tr>
<tr><td>ddd</td><td>left</td><td>234-456-789</td><td>234-456-788</td></t
r>
<tr><td>eee</td><td>right</td><td>238-456-789</td><td>238-456-788</td></
tr>
<tr><td>fff</td><td>right</td><td>235-456-789</td><td>235-456-788</td></
tr>
<tr><td>ggg</td><td>left</td><td>236-456-789</td><td>236-456-788</td></t
r>
</tbody>
</table>
</div>
</body>
</html>
-------------------------------------

Thanks.

-- ---------------------------------------------
Article posted with Web Developer's USENET Archive
http://www.1-script.com/forums
no-spam read and post WWW interface to your favorite newsgroup -
comp.infosystems.www.authoring.html - 14704 messages and counting!
-----------------------------------------------
Aug 26 '05 #1
4 133947
In article <Pe*******************@fe04.news.easynews.com>,
ju****************************@foo.com (justdummy) wrote:
Hi,

I am struggling with a problem for sometimes. I need to display a table in
a html and if the height of the table goes beyond 200 px then a vertical
scrollbar should alone appear without any horizontal scroll bar. If the
height of the table is less than 200 px then no scroll bars should appear.
Here is the html below. I tried to wrap the table around a <div> tag but
its doesn't work out as the scroll bar appear close to the scroll bar of
the page rather than close to the table. Further if the height of the
table is less than 200 px (i.e., with fewer number of rows like just 2
rows) then also the scroll bars appear.

Am I missing anything in this? Or Is there any other better solution to
this? I would appreciate any help to solve this problem. <div style="height:200px; overflow:scroll">
<table cellpadding="0" cellspacing="1" width="800px"> <...> </table>
</div>


Well, this particular table is 800px wide. You will automatically get a
horizontal scroll at less than that. You may have other problems.

leo

--
<http://web0.greatbasin.net/~leo/
Aug 26 '05 #2
justdummy wrote:

<div style="height:200px; overflow:scroll">

Try "overflow: auto".

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Aug 26 '05 #3
Jim Moe wrote:
justdummy wrote:

<div style="height:200px; overflow:scroll">

Try "overflow: auto".

Depending on browser compatibility you might try these rules
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;

Louise
Aug 26 '05 #4

Cross-browser scrolling tbody:
http://www.gtalbot.org/DHTMLSection/ScrollingTBody.html

Gérard
--
remove blah to email me
Aug 26 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by David Pratt | last post: by
3 posts views Thread by David Rwj Cherry CS2000 | last post: by
3 posts views Thread by AES/newspost | last post: by
reply views Thread by Sachin | last post: by
reply views Thread by Joey | last post: by
4 posts views Thread by Matthew Cox | last post: by
reply views Thread by kermitthefrogpy | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.