asked on

Providing Vertical Scroll bar to html table

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

can you please suggest

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

Bardobrave

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.

ldavis07

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.

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

praveen1981

ASKER

This solved the problem