Как сделать полосу прокрутки?

Question

Я новичок здесь. я создаю таблицу, которая может показать данные из базы данных, и создать еще 1 таблицу, чтобы показать данные, которые будут выбраны Но проблема в том, что если мы просто выберем несколько данных, это не будет проблемой. но если выбрать более 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.

Answer 2

Чтобы решить эту проблему, поместите табличный тег в тег «Div» и присвойте конкретный тег «height» тегу «Div», который вы хотите дать, и присвойте «style = overflow: auto» тегу DIV. Он автоматически покажет полосу прокрутки.