How to add scrollbars using bootstrap?

Question

I have this html Code taken from http://www.tutorialrepublic.com/:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Simple Tables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="table-responsive"> 
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Biography</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Carter</td>
                    <td>johncarter@mail.com</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>peterparker@mail.com</td>
                    <td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>John</td>
                    <td>Rambo</td>
                    <td>johnrambo@mail.com</td>
                    <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

How do I add a scroll bar (up-down) & (left-right) using bootstrap without affecting the width of the web page? Like I want it to have a fixed column(4) and row(5) to display when I add another row and columns to the table. If I add another to the table, my webpage seems to extend. like the code I post above, like it must have a fixed height and width to the web page. Is there any possible way to do it?

score 4 · Accepted Answer · edited May 23 '17 at 11:59

4

Add this css

thead, tbody { display: block; }
tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

Thanks to hashem-qolami

For more information Read this post

edited May 23 '17 at 11:59

Community

1
1

answered May 22 '15 at 12:34

sheshadri

1,207
9
21

Thanks sir it work! :) , but will it affect this format if this code is access in mobile.? – laurence keith albano May 22 '15 at 12:44
yes it works in mobile view also.....Happy to help... – sheshadri May 22 '15 at 12:53
thank you. :) uhm do I add another to make this code mobile friendly and it will not affect its current format? – laurence keith albano May 22 '15 at 12:59
ok sir thank you so much for your effort. – laurence keith albano May 22 '15 at 13:02

score 2 · Answer 2 · answered May 22 '15 at 12:37

2

Set max-height and max-width CSS properties to show your desired number of Rows and Columns and set overflow-y:scroll; and overflow-x:scroll;. Like

 .table-responsive{
    max-height: 250px;
    max-width: 100px;
    overflow-y:scroll; 
    overflow-x:scroll; 
 }

answered May 22 '15 at 12:37

Mansoor Jafar

1,458
3
15
31

this one works also sir, thank you for effort. :) – laurence keith albano May 22 '15 at 12:59

How to add scrollbars using bootstrap?

2 Answers2