如何制作滚动条？

Question

我是新来的.我创建一个表,可以显示数据库中的数据,并创建另外一个表来显示所选的数据.但问题是如果我们只选择一些数据就不会有问题.但如果选择超过100个数据,则可能导致布局问题.

这是我的代码......

<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>

谁能帮我解决这个问题？谢谢..

Answer 1

你可以包装任何可能变大的元素,指定一个高度,然后将css"overflow"属性设置为"scroll".

请参阅W3C 关于CSS 属性的教程overflow.