[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Providing Vertical Scroll bar to html table

Posted on 2011-10-21
5
Medium Priority
?
323 Views
Last Modified: 2012-05-12
Hi
I want to Provide Vertical Scroll bar to the html table.

can you please suggest
0
Comment
Question by:praveen1981
5 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 37005893
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 37005905
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
 
LVL 4

Expert Comment

by:ldavis07
ID: 37006270
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 37008007
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
 

Author Closing Comment

by:praveen1981
ID: 37016438
This solved the  problem
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question