Bootstrap: .table-responsive when Flexbox is enabled

[Pikoulol]

Is it possible to have a table responsive in flex mode ?

In the following snippet, the table is not responsive.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Test</th>
                            <th class="text-nowrap">Header 1</th>
                            <th class="text-nowrap">Header 2</th>
                            <th class="text-nowrap">Header 3</th>
                            <th class="text-nowrap">Header 4</th>
                            <th class="text-nowrap">Header 5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row" class="text-nowrap">Row 1</th>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Valueeeeeeeeeeeeeee</td>
                        </tr>
                        <tr>
                            <th scope="row" class="text-nowrap">Row 2</th>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Valueeeeeeeeeeeeeee</td>
                        </tr>
                        <tr>
                            <th scope="row" class="text-nowrap">Row 3</th>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Valueeeeeeeeeeeeeee</td>
                        </tr>
                        <tr>
                            <th scope="row" class="text-nowrap">Row 4</th>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Valueeeeeeeeeeeeeee</td>
                        </tr>
                        <tr>
                            <th scope="row" class="text-nowrap">Row 5</th>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Value</td>
                            <td class="text-nowrap">Valueeeeeeeeeeeeeee</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

[thatdevgirl]

I was having the same issue. The issue is definitely related to flexbox. I was able to solve it in a really hacky way by basically disabling flex box for smaller screens. In this case, I wanted a single column layout for smaller screens anyway, so it worked out.

HTML:

<div id="mainContent">
    <div class="row">
        <div class="col-xs-12">
            <div class="table-responsive">
                <table>
                    <!-- table content goes here -->
                </table>
            </div>
        </div>
    </div>
</div>

Sass:

#mainContent {
  .row {
    display: block;

    @include breakpoint($md) {
      display: flex;
    }
  }

  .col-xs-12 {
    width: 100%;

    @include breakpoint($md) {
      width: auto;
    }
  }
}

Like I said... hacky. Certainly not a permanent solution, but it works in a pinch. Hoping for a more permanent solution in the released version of Bootstrap 4.

[Pikoulol]

Hi,
Thank you for your answer
I read an article (+ demo http://dfmcphee.com/2016/03/flex-items-and-min-width-0/) two days ago about that. Maybe this could help ?

By adding min-width: 0 to the item, it will resize at the correct ratio and still apply the overflow as desired

[thatdevgirl]

Yes - that totally helped. Far less hacky. Thank you!

Updated Sass:

#mainContent {
  .col-xs-12 {
    min-width: 0;
  }
}

[mdo]

This appears to be functional to me: https://jsbin.com/nilura/edit?html,output. Tested with the latest code from v4-dev which has flexbox enabled by default.

[tavax]

not working when the wrapper is a flex display, .table-responsive don't work at all :/

[simPod]

Anyone has a solution?

[thatdevgirl]

I came across this a while ago. It works with Bootstrap 3. Maybe someone (with more time than me right now :) ) can fork this and make it work with Bootstrap 4? http://gergeo.se/RWD-Table-Patterns/

[cygwin255]

Use min-width: 0; on table wrapper with flex. Worked for me.