Question

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

下面是没有div的表格的图片

Table without Div Tag

Table Shrunk by the Div Tag

下面是表格的代码。

<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

你在找这样的东西吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果缩小到较小的尺寸，则可能需要手动调整div的宽度和高度。

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

只需使用宽度和高度值。我想不出更容易解决这个问题的方法

Answer 5

问题在于包含表的部分，当它减少时，它会影响表。因此，以下css代码修复了问题。

以下是该表的标记。

<div class="content">
    <div class="row">
        <a href="#link">link</a>
        <a href="#link2">link from news 2</a>
        <a href="#link3">link from news 3</a>
        <a href="#link4">link from news 4</a>
        <a href="#link5">link from news 5</a>
        <h2 class="date">01 July 2015</h2>
        <div class="thumbnail">
            <img src="somesource">
        </div>
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A id vero rerum consectetur itaque ex saepe quia nam quam est!
       </div>
    </div>
</div>

以下是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>

感谢大家的贡献。

将垂直和水平滚动条添加到HTML5表

5 个答案: