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

尝试将表格包裹在<div class="table-wrapper">...</div>

中

表包装器的CSS将是....

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

Answer 2

对于要滚动的元素，你需要给出高度，当它溢出那个高度时会发生什么。例如：

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

当内容超过20px高度时，会导致表格有滚动条

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>

如何在我的表格中添加滚动条？

4 个答案: