Add Vertical and Horizontal Scrollbars to HTML5 Tables

Question

I have a table and I want to make both vertical and horizontal scrollable. When I add a div , it becomes scrollable but however shrinks to smaller size. I want the table to occupy the available width of the screen and scrollable. Rather than make the table scrolable but reduce it to a small size.

Below is the pic of the table without a div

Table without Div Tag

Table Shrunk by the Div Tag

below is the code for the table.

<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

Below is the code for the css

 div#scroll-table{
  overflow:auto;  
}

Any suggestion will be appreciated.

SuperVeetz · Accepted Answer · 2015-07-18 09:00:37Z

1

Try this,

#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);        
}

answered Jul 18, 2015 at 9:00

SuperVeetz

2,1483 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

faisal abdulai Over a year ago

Tried but the was scrollbars attached to table

Rachel Gallen · Accepted Answer · 2015-07-18 12:49:08Z

1

specify overflow-x:scroll; and a min-width:e.g.95%; overflow-y:auto; here is a fiddle jsfiddle.net/yeao6ph7/9

answered Jul 18, 2015 at 12:49

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Comments

IMI · Accepted Answer · 2015-07-18 19:00:55Z

Are you looking for something like this?

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>

Chris · Accepted Answer · 2015-07-18 19:18:25Z

1

If it shrinks to a smaller size you might have to manually adjust the width and height of the div.

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

just play around with the width and height values. I can't think of an easier way to solve this problem

answered Jul 18, 2015 at 19:18

Chris

1134 bronze badges

Comments

faisal abdulai · Accepted Answer · 2015-07-19 20:39:13Z

The problem was with the section containing the table , when it reduces , it affects the table .So the following css code fixed the problem.

Below is the mark up for the table.

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

Below is css code

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

Thank everybody for their contribution.

as my suggestion of reducing the width seems to have been the answer, please mark my answer as accepted.

Collectives™ on Stack Overflow

Add Vertical and Horizontal Scrollbars to HTML5 Tables

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related