Bootstrap 3 table - table-responsive not working

Question

I'm using bootstrap 3 for a website project. I'm trying to create a page with a responsive table, so that I'd have the scrollbar when the table is too big. I made a test case like so:

<div class="row">   <h4>Nuværende kurser</h4>   <div class="col-12 col-sm-12 col-lg-12">     <div class="table-responsive">       <table class="table">         <thead>           <tr>             <th>#</th>             <th>Table heading</th>             <th>Table heading</th>             <th>Table heading</th>             <th>Table heading</th>             <th>Table heading</th>             <th>Table heading</th>           </tr>         </thead>         <tbody>           <tr>             <td>1</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>           </tr>           <tr>             <td>2</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>           </tr>           <tr>             <td>3</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>           </tr>         </tbody>       </table>     </div>   </div><!-- end col-12 --> </div><!-- end row --> 

Now, the problem is that it doesn't add the scrollbar, it merely expands the website to the width of the table.

See a screenshot here:

I've seen it working on several other websites, so something I'm doing...is wrong.

Answer 1

Replace your table-responsive with this

<div class='table-responsive'> -> <div style="overflow-x:auto;"> 

Answer 2

Make sure to set your table display block

.table {    display: block !important; }