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!
-----------------------------------------------
