By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,480 Members | 771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,480 IT Pros & Developers. It's quick & easy.

Only Vertical Scroll bar no horizontal bars

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a

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.