Bootstrap3 responsiveness for table is not working

Question

<div class="table-responsive">
<table class="table">
...
</table>
</div>

This code block is not resulting in responsive table in Bootstrap. Please help me in achieving the responsive table using bootstrap. Thanks in advance

Answer 1

Following Responsive table will works only <768px.

<div class="table-responsive">
    <table class="table">
    </table>
</div>

Because bootstrap 3 has following code

@media (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: scroll;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #DDD;
        -webkit-overflow-scrolling: touch;
    }
}

If you want responsive table for display >768px, then you can overwrite it in your css without media query just like this

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
    -webkit-overflow-scrolling: touch;
}

Answer 2

I know the documentation says so which I have asked .table-responsive doesn't work in div above the table but adding it to the table class works ... Do the following and your issue should be solved.

Not working:

<div class="table-responsive">
  <table class="table">
  ......
  </table>
</div>

Works:

<table class="table table-responsive">
......
</table>

DEMO

Answer 3

I dont see why the following would not work... Make sure you are not setting widths or heights... post the full HTML.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

[bootstrap3]

Answer 4

Fizer Khan's answer on this page is correct. Just to add to it though, so that you only apply this when you absolutely want it in devices >768px, I'd recommend you create a custom CSS style in your own CSS file called something like:

.table-responsive-force {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
    -webkit-overflow-scrolling: touch;
}

Then you can just use it whenever you want to actually override Bootstrap's default behaviour.