如何制作滚动条？

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>

任何人都可以帮我解决这个问题吗？ THX ..

Answer 1

您可以包装任何可能变大的元素，指定高度，然后将css“overflow”属性设置为“scroll”。

在CSS的overflow属性上查看W3C的tutorial。

Answer 2

要解决此问题，请将表格标记放在“Div”标记中，并将特定的“高度”赋予“Div”标记，并将“style = overflow：auto”赋予DIV标记。它会自动显示滚动条。