Bootstrap3 responsiveness for table is not working

Bootstrap3 responsiveness for table is not working


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

Solutions/Answers:

Solution 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;
}

Solution 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:

Related:  How to remove error about glyphicons-halflings-regular.woff2 not found
<table class="table table-responsive">
......
</table>

DEMO

Solution 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]

Solution 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.

Solution 5:

You probably didn’t set the width to outer (wrapping) div (or section). Adding ‘width: 100%’ to outer element might solve the issue.

References

Related:  Control multiple tab-contents with one nav-tabs