Bootstrap table scroll

Create Material Design scrollable table based on Bootstrap grid. Vertical scrolling tbody, and thead is helpful when you need to display a lot of data. Responsive table with the independent scroll bar is a great solution!


Basic example

# Name Surname Country City Position Age
1 Kate Moss USA New York City Web Designer 23
2 Anna Wintour United Kingdom London Frontend Developer 36
3 Tom Bond Spain Madrid Photographer 25
4 Jerry Horwitz Italy Bari Editor-in-chief 41
5 Janis Joplin Poland Warsaw Video Maker 39
6 Gary Winogrand Germany Berlin Photographer 37
7 Angie Smith USA San Francisco Teacher 52
8 John Mattis France Paris Actor 28
9 Otto Morris Germany Munich Singer 35
<div class="card">
    <div class="card-body">

        <div class="table-wrapper-2">

            <!--Table-->
            <table class="table table-responsive-md">
                <thead class="mdb-color lighten-4">
                    <tr>
                        <th>#</th>
                        <th class="th-lg">Name</th>
                        <th class="th-lg">Surname</th>
                        <th class="th-lg">Country</th>
                        <th class="th-lg">City</th>
                        <th class="th-lg">Position</th>
                        <th class="th-lg">Age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Kate</td>
                        <td>Moss</td>
                        <td>USA</td>
                        <td>New York City</td>
                        <td>Web Designer</td>
                        <td>23</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Anna</td>
                        <td>Wintour</td>
                        <td>United Kingdom</td>
                        <td>London</td>
                        <td>Frontend Developer</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>Tom</td>
                        <td>Bond</td>
                        <td>Spain</td>
                        <td>Madrid</td>
                        <td>Photographer</td>
                        <td>25</td>
                    </tr>
                    <tr>
                        <th scope="row">4</th>
                        <td>Jerry</td>
                        <td>Horwitz</td>
                        <td>Italy</td>
                        <td>Bari</td>
                        <td>Editor-in-chief</td>
                        <td>41</td>
                    </tr>
                    <tr>
                        <th scope="row">5</th>
                        <td>Janis</td>
                        <td>Joplin</td>
                        <td>Poland</td>
                        <td>Warsaw</td>
                        <td>Video Maker</td>
                        <td>39</td>
                    </tr>
                    <tr>
                        <th scope="row">6</th>
                        <td>Gary</td>
                        <td>Winogrand</td>
                        <td>Germany</td>
                        <td>Berlin</td>
                        <td>Photographer</td>
                        <td>37</td>
                    </tr>
                    <tr>
                        <th scope="row">7</th>
                        <td>Angie</td>
                        <td>Smith</td>
                        <td>USA</td>
                        <td>San Francisco</td>
                        <td>Teacher</td>
                        <td>52</td>
                    </tr>
                    <tr>
                        <th scope="row">8</th>
                        <td>John</td>
                        <td>Mattis</td>
                        <td>France</td>
                        <td>Paris</td>
                        <td>Actor</td>
                        <td>28</td>
                    </tr>
                    <tr>
                        <th scope="row">9</th>
                        <td>Otto</td>
                        <td>Morris</td>
                        <td>Germany</td>
                        <td>Munich</td>
                        <td>Singer</td>
                        <td>35</td>
                    </tr>
                </tbody>
            </table>
            <!--Table-->

        </div>

    </div>
</div>

.table-wrapper-2 {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}