Providing Vertical Scroll bar to html table

Hi
I want to Provide Vertical Scroll bar to the html table.

can you please suggest
praveen1981Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kiran SonawaneProject LeadCommented:
Look at below code. You need add jquery scroll plug in attached with this.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>

    <style type="text/css" media="screen">
      /* demo styles */
      .scrollbar.simple{width:250px;height:200px;margin:0 60px 0 0;overflow:hidden;float:left;background:#EEE;-moz-box-shadow:none;border:none;}
    </style>
    <link href="css/scrollbar.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <div id="demo2">
      <div id="container2" class="scrollbar simple">
        <table>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
           <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
           <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
           <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
          <tr>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
            <td>test data</td>
          </tr>
        </table>
      </div>
    </div>

  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery.scroll.min.js"></script>
    <script type="text/javascript">
      $('.scrollbar').scrollbar();
    </script>
  </body>
</html>

Open in new window

jquery.scroll.js
0
BardobraveCommented:
If you include your table inside a <div> tag with css style attribute overflow:auto I think that it will scroll when table grows over div's size.
0
ldavis07Commented:
To make a scroll box with a vertical scroll, you need to use overflow-y:scroll;. This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high. Here, we make our content too big simply by adding too much text to fit into the div. We can also make the contents too big by setting it's height to 200 percent (similar to what I did to the width of this horizontal scroll box). Therefore, we could force vertical scroll bars with minimal or no content.
0
COBOLdinosaurCommented:
You did not mention if you need the headings to stay fixed.  If you do this is a 7 year old solution from a Q I answered in 2004.
<html>
<head>
<script language="javascript">
function init() {
var eTable = document.getElementById("headers");
eTable.style.width=document.getElementById('data').offsetWidth+'px';
document.getElementById('th1').style.width=document.getElementById('td1').offsetWidth+'px';
document.getElementById('th2').style.width=document.getElementById('td2').offsetWidth+'px';
document.getElementById('th3').style.width=document.getElementById('td3').offsetWidth+'px';
document.getElementById('th4').style.width=document.getElementById('td4').offsetWidth+'px';
}
window.onload = init;
window.onresize=init;
</script>
<style>
table#headers, table#data {background:#dda0dd;}
td, th {vertical-align:top;background:#ffffff;}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1" id="headers">
<tr>
<th id="th1">T</th>
<th id="th2">H</th>
<th id="th3">Y</th>
<th id="th4">H</th>
</tr>
</table>
<div style="width:100%;height:300px;overflow:auto;">
<table cellpadding="4" cellspacing="1" width="100%" id="data">
<tr>
<td id="td1">Data</td>
<td id="td2">Hello</td>
<td id="td3" style="width:60%">I am here and so are you</td>
<td id="td4">Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I...........................................xxxxxxxxxxxxxxxxxxxxxx</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
</table>
</div>
</body>
</html>

Open in new window

from :http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_21218629.html

It is pretty old fashioned, and the headings are a bit off, but it might offer a starting point.  Works in FF, IE and Chrome.  When I get time I suppose I should modernize it, but right now the best I can do is offer it as is with a few warts.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
praveen1981Author Commented:
This solved the  problem
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.