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

Question

Я хочу, чтобы мой стол имел полосу прокрутки, чтобы страница не имела слишком высокой высоты, и я попробовал много ответов, которые я искал, но ничего не происходит. вот мой код.

<div class="text">List Of Product </div> 
    <div id="tableContainer" class="tableContainer"> 
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable"> 
<thead class="fixedHeader"> 
<tr> 
<th>Image</th> 
<th>Item Name</th> 
<th>Item Price</th> 
<th>Item Description</th> 
<th></th> 
</tr> 
</thead> 
<?php 
    include('config.php'); 
    $result2 = mysql_query("SELECT * FROM category"); 
    while ($row2 = mysql_fetch_array($result2)) { 
     $ble = $row2['id']; 
     $result3 = mysql_query("SELECT * FROM athan_products where product_id='$ble'"); 
     echo '<tbody class="scrollContent">'; 
     echo "<tr>"; 
     while ($row3 = mysql_fetch_array($result3)) { 
      echo '<td class="templatemo_pizza_box"><img alt="Motor" src="images/motor/'  . $row3['product_photo'] . '" width="65px" height="65px" /></a></td>'; 
      echo '<td class="textbox"> ' . $row3['partsname'] . ' </td>'; 
      echo '<td class="textbox"> ' . $row3['price'] . ' </td>'; 
      echo '<td class="textbox"> ' . $row3['description'] . '  </td>'; 
                     echo '<td><a rel="facebox" href=portal.php?id=' .  $row3["product_id"] . '><input type="submit" value="Add to Cart"/></td>'; 
     } 
     echo '</tr>'; 
     echo "</tbody>"; 
    } 
?> 
</table> 
</div> 

Answer 1

Для элемента вы хотите прокрутки и нужно дать высоту , и что происходит, когда он переполняет эту высоту. Например:

<table style="height:20px;overflow-y:scroll">....</table> 

Вызовет таблица иметь полосы прокрутки, когда содержание превышает 20px в высоту

Answer 2

Попробуйте обертывание таблицы в <div class="table-wrapper">...</div>

The CSS для таблицы обертки затем быть ....

div.table-wrapper { 
    max-height: 400px; /* max height for the table */ 
    overflow-y: scroll; 
} 

Answer 3

Простой в использовании в CSS:

table{ overflow-y:scroll;height: 200px; } 

Answer 4

Может быть, это будет работать. пожалуйста, попробуйте этот код.

<table style="height:20px; overflow-y:scroll" wirdth="2px"> 
<tr>  
<th>hello</th> 
</tr> 
<tr> 
    <td>one</td> 
    <td>two</td> 
    <td>three</td> 
</tr> 
    </table>