html - 向 HTML5 表格添加垂直和水平滚动条

Question

我有一个表格，我想让它在垂直和水平方向上都可以滚动。当我添加一个 div 时，它会变得可滚动，但会缩小到更小的尺寸。我希望表格占据屏幕的可用宽度并可滚动。不是让表格可滚动，而是将其缩小到较小的尺寸。

下图是没有div的表格

下面是表格的代码。

<div id="scroll-table">
<table >
<caption>
           List data from mysql
            </caption>
            <tr>
                <th class="center"><strong>ID</strong></th>
                <th class="center"><strong>FirstName</strong></th>
                <th class="center"><strong>Lastname</strong></th>
                <th class="center"><strong>Request</strong></th>
                <th class="center"><strong>Purpose</strong></th>
                <th class="center"><strong>Description</strong></th>
                <th class="center"><strong>Booking Time</strong></th>
                <th class="center"><strong>Access Time</strong></th>
                <th class="center"><strong>Exit Time</strong></th>
                <th class="center"><strong>Approved</strong></th>
                <th class="center"><strong>Approved By</strong></th>
                <th class="center"><strong>Update</strong></th>
            </tr>
            <?php
            if($result->num_rows > 0){
                // output data of each row
                while($rows = $result->fetch_assoc()){ ?>
                    <tr>
                        <td class="center"><?php echo $rows['id']; ?></td>
                        <td class="center"><?php echo $rows['fisrt_name']; ?></td>
                        <td class="center"><?php echo $rows['last_name']; ?></td>
                        <td class="center"><?php echo $rows['request']; ?></td>
                        <td class="center"><?php echo $rows['purpose']; ?></td>
                        <td class="center"><?php echo $rows['description']; ?></td>
                        <td class="center"><?php echo $rows['booking_time']; ?></td>
                        <td class="center"><?php echo $rows['access_time']; ?></td>
                        <td class="center"><?php echo $rows['exit_time']; ?></td>
                        <td class="center"><?php echo $rows['approved']; ?></td>
                        <td class="center"><?php echo $rows['approved_by']; ?></td>
                        <td class="center" ><a href="update.php?id=<?php echo $rows['id']; ?>">update</a></td>
                    </tr>
                        
                    <?php
                }
            }
            ?> 
</table>
</div>
</sect

下面是css的代码

 div#scroll-table{
  overflow:auto;  
}

任何建议将不胜感激。

Answer 1

试试这个，

#scroll-table {
  height: auto;
  max-height: 180px; // 180px seems to work well on mobile
  overflow: scroll;
  border-radius 0px;
  -webkit-border-radius: 0px;
}
#scroll-table::-webkit-scrollbar {
 -webkit-appearance: none;
 width: 4px;        
}
#scroll-table::-webkit-scrollbar-thumb {
 border-radius: 3px;
 background-color: lightgray;
 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);        
}