Space between Bootstrap Table and Scrollbar

Question

I have a responsive bootstrap table and I want to display the scrollbar even when you do not need to scroll. However, there is a big space between the bottom of the table and the scrollbar.See jsfiddle: https://jsfiddle.net/er1187/dmgx7db6/

I tried adding no margin/padding to the table but this is not work. Thanks in advance!

.table-responsive{
     overflow-x:scroll;
     margin: 0 !important; 
     padding-bottom: 0 !important;
}

Answer 1

Try to reorder your code. Try this

<div class="box-content box-no-padding">
        <div class="table-responsive">
            <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center">First Name</th>
                            <th class="text-center">Last Name</th>
                            <th class="text-center">ID</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Smith</td>
                            <td>1187</td>
                        </tr>
                    </tbody>
                </table>
            <div class="scrollable-area">

            </div>
        </div>
    </div>