Bootstrap: .table-responsive not expanding to its parent

[dumb]

I apologize for dragging a closed issue (#18612) back into the light, but I'm not sure the responsive table is behaving as it should.

As of v4.0.0-alpha.6, the problem seems to remain:

• tables with the .table class are 100% of the width of their parent
• tables with .table + .table-responsive are only as wide as their content
• tables with the class .table that are also wrapped with <div class="table-responsive"> are %100 of the width of their parent

Here's a fiddle:

https://jsfiddle.net/45tbox4f/

Example 2 and 3 are both scroll horizontally, but the non-wrapped table doesn't expand to its parent as @aimeos pointed out. I believe the example in the docs appears to work because its content is already quite wide(?)

(Tested on the latest Safari, Chrome OSX, FF OSX, Chrome Win and FF Win)

Please feel free to berate me if I got this wrong!

[MortimerCat]

I agree that table-responsive is broken if the content is less than the viewing device width. i.e. I found this issue because my table works well on my narrow iPhone, but on a tablet the table sits to the left of the screen.

[cpeuterbaugh]

.table-responsive still works (in my case) as a wrapper, but I thought the whole goal was to change it to a modifier (which doesn't work in my experience).

[MortimerCat]

Thank you @cpeuterbaugh using table-responsive as a wrapper is a workaround.

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

[jbruni]

Hit this issue right now, and it is really surprising for me to see a display: block rule at the table-responsive class:

• https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/_tables.scss#L144

Removing it resolves the issue for me.

I do not know the purpose or intention of this display rule at this context, but for me it seems to confirm that the expected usage is still as a wrapper, despite what documentation says. Otherwise, changing the default display of a table (which is table) to block seems wrong to me. Please, explain to me if i'm wrong.

Thank you! Bootstrap rocks.

[jbruni]

Hmmm... found related pull requests:

• https://github.com/twbs/bootstrap/pull/21677
• https://github.com/twbs/bootstrap/pull/21678

As far as I understood, the pull requests advocate that table-responsive needs to be used as a wrapper, and the documentation should reflect the fact.

[jbruni]

Yeah... after what I've seen I'm more confused than before... :-) ...anyway, usage of table-responsive as a modifier rather than a wrapper seems to be definetely broken, at the moment.

[bogdaniel]

yeap i noticed too some weird stuff going on when using table-responsive.

[pmsaue0]

It appears that there is no media query governing the application of display: block; etc. I think that the whole .responsive-table rule should be wrapped with @include media-breakpoint-down(sm) {...}

By default, the table should display as table, and at the smaller breakpoint, display as block.

Applying the @include media-breakpoint-down(sm) {...} fixed the problem for me.

Like so:

// Responsive tables
//
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
// enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

@include media-breakpoint-down(sm) {
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057}

    // Prevent double border on horizontal scroll due to use of `display: block;`
    &.table-bordered {
      border: 0;
    }
  }
}

[cmawhorter]

22217 doesn't fix the problem as much as it hides it. with the fix, you'll still have:

1. narrow tables on md down will not stretch 100%
2. wide tables on larger than md will still overflow

from where i sit, display block seems like a failed experiment here. i'd prefer a wrapper to this.

[marchershey]

Has this been resolved? I'm updated to 4.1.0 and it's still not working for me.