How to make scrollbar?

Question

hi. i'm new here. i create a table which can show the data from the database and create 1 more table to show the data which be selected. But the problem is if we just select few data it wont be a problem. but if select more than 100 data it can cause a layout problem.

and this my code...

<script type="text/javascript">
function List(){
 var selectedProduct = ""; 
 var product = document.getElementById('product');
 var output ="";   
 var k = 0; 
 var name = new Array;
 var model = new Array;
 var unitprice = new Array;

  <?php foreach ($productPrices as $price): ?>
   name[k] = "<?php echo $price['Product']['txtname']; ?>";
   model[k] = "<?php echo $price['Product']['txtmodel']; ?>";

   k++;
  <?php endforeach; ?>

  k=0;
  for (var i = 0; i < product.length; i++) { 
    k = product.options[i].value;

   if (product.options[i].selected) {  
    output += '<tr>'+
        '<td style="border-right: 0px; width:270px; text-align:center" id="ProductProduct'+k+'" name="data[Product][Product]['+k+']">'+name[i]+'</td>'+
        '<td style="border-right: 0px; width:100px; text-align:left" id="ProductProduct'+k+'" name="data[Product][Product]['+k+']">'+model[i]+'</td>'+
       '</tr>'; 
   }
  } 
  output = '<table style="width:500px; border: 0px;">'+output+'</table>';   
  document.getElementById('productTable').innerHTML = output;
}     
</script>

<table  cellpadding="0" cellspacing="0" style="width:100%">
 <caption><div align="left">Peoduct Selection</div></caption>
 <tr>
  <th  style="width:25%"><font><div align="left">Select Product :</div></font>
     <?php  echo $form->input('Product',array(
       'label' => 'Select Products',
       'options' => $products,
       'id'=>'product',
       'style'=>'width:250px;height:100px',
       'selected' => $html->value('Product.Product'),
       'onchange'=>'List();')); ?> </th>
  <th ><table>
   <tr>
    <th style="width:400px"><div align="center">Product Name</div></th>
    <th style="width:250px"><div align="center">Product Model</div></th>
   </tr>
   <tr>
    <td colspan="4" ><span id="productTable"></td>
   </tr>
  </table></th>
 </tr>
 </table>

Can anyone help me solve this? thx..

Answer 1

You can wrap whatever element that could get big, specify a height, and then setting the css "overflow" property to "scroll".

See the W3C's tutorial on CSS's overflow property.

Answer 2

To solve this problem put the table tag in a "Div" tag and give the particular "height" to "Div" tag which you wanna give and give "style=overflow:auto" to DIV Tag. It will automatically show the scroll bar.