Scrollbar inside DIV Tag

Hi All,

I am creating a window using div tags of certain height and width. Inside div tags, there is a table which contains very large amount of data. What I want is a scrollbar for TD using CSS.

I have attached my code for your refernce. I have read we can do this using overflow: auto but I tried using that but its not working.



#about_us {
  background-color: #ffffff;
  color: #000000;
  display: none;
  border: 3px double black;
  z-index: 80000;
  padding: 8px 8px 0 8px;
  width: 100px;
  height: 50px;
}

#about_us * {
  font-size: 9pt;
  font-family: Verdana, Arial, Helvetica;
}

#about_us input {
  border: 1px solid black;
  margin: 1px;
  font-weight: bold;
}

<!-- About Us -->
<div id="about_us1" style="position:absolute; right:5px; top:5px;">
  <div id="about_form" style="text-align:left;">
      <center><input type="button" value="Cancel/Close" style="font-size: 10pt" onClick="document.getElementById('about_us').style.display='none';"></center>
      <table border="0" cellpadding="2" cellspacing="0">
      <tr><td>Data is going here Data is going here Data is going here Data is going here Data is going here<BR>Data is going here Data is going here Data is going here Data is going here Data is going here<BR>Data is going here Data is going here Data is going here Data is going here Data is going here<BR>Data is going here Data is going here Data is going here Data is going here Data is going here<BR></td></tr>
      </table>
      <center><input type="button" value="Cancel/Close" style="font-size: 10pt" onClick="document.getElementById('about_us').style.display='none';"></center>
  </div>
</div>


I would appreciate if sombody please help me out with this. Thanks in advance!

Best Regards,
Inderpal Singh

You would be better to put the table inside another div called scroll and set the height and width accordingly…



<style type="text/css">
#about_us {
  background-color: #ffffff;
  color: #000000;
  display: none;
  border: 3px double black;
  z-index: 80000;
  padding: 8px 8px 0 8px;
  width: 100px;
  height: 50px;
}

#about_us * {
  font-size: 9pt;
  font-family: Verdana, Arial, Helvetica;
}

#about_us input {
  border: 1px solid black;
  margin: 1px;
  font-weight: bold;
}
</style>

<!-- About Us -->
<div id="about_us1" style="position:absolute; right:5px; top:5px;">
  <div id="about_form" style="text-align:left;">
  	<div id="scroll" style="height: 150px; width: 100%; overflow:auto;">
      <center><input type="button" value="Cancel/Close" style="font-size: 10pt" onClick="document.getElementById('about_us').style.display='none';"></center>
      <table border="0" cellpadding="2" cellspacing="0">
      <tr><td>Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR>
        Data is going here Data is going here Data is going here Data is going here Data is going here<BR></td></tr>
      </table>
	  </div>
      <center><input type="button" value="Cancel/Close" style="font-size: 10pt" onClick="document.getElementById('about_us').style.display='none';"></center>
  </div>
</div>

Cheers

Spike

Hi,

I have solved the problem. Thanks for your support.

Regards,
Inderpal Singh