將垂直和水平滾動條添加到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);        
}

Answer 2

指定overflow-x:scroll ； min-width ：例如95％； overflow-y:auto; 這是一個小提琴jsfiddle.net/yeao6ph7/9

Answer 3

您是否正在尋找這樣的東西？

 table { border: 1px solid red; box-sizing: border-box; display: block; overflow: scroll; width: 100%; } th { border: 1px solid green; min-width: 150px; } 

 <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> </table> 

Answer 4

如果縮小到較小的尺寸，則可能必須手動調整div的寬度和高度。

#scroll-table{
width: 100px;
height: 50px;
};

只是玩弄寬度和高度值。 我想不出更簡單的方法來解決這個問題

Answer 5

問題在於包含表的部分，當表部分減少時，它會影響表。因此，以下CSS代碼解決了該問題。

下面是表格的標記。

 <section id="content"> <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> </section> 

下面是CSS代碼

 section#content {display:block; min-width:95%;} 

感謝大家的貢獻。