Bootstrap: Responsive Table not working with variable width columns

[Nickno95]

When using auto width columns and variable width columns, a responsive table breaks the layout.

Example JSFiddle: https://jsfiddle.net/Nickno/px573g8x/8/

[asyncdesign]

It's the table cell content width that stops the columns from shrinking - it's difficult to make a truly responsive html table. To do so, the table would have to be transformed into some other type of layout.

[Nickno95]

That is what the responsive-table wrapping div is for; it makes the table scroll in it's column. The correct layout for the example should be the blue column is the width of its contents, the green column is the width of its contents, and the table's column should be the remaining horizontal space for the row. This works correctly when defining specifying the columns: https://jsfiddle.net/Nickno/b3m3pusb/ ; but not when having autowidth and variable width columns in the first example.

[theZieger]

@Nickno95 I don't think that the behaviour you are looking for can be achieved with the bootstrap grid or with flexbox in general. The overall problem here is that the column of the table will grow until 100% of the rows width.

To achieve a working layout you would have to set explicit column widths like you did here: https://jsfiddle.net/Nickno/px573g8x/8/

At least I don't see any kind of "flexbox magic" that would let you define three auto-width columns where one would have an block-level child which could grow to any width and the layout would work at any scenario.

[Nickno95]

After playing around with it for a while, I managed to find a fix. By styling the parent col (the auto width one) with "overflow-x:auto", it makes any responsive tables in it work correctly.

JS Fiddle: https://jsfiddle.net/Nickno/4o6m9cqg/4/

[rmullaney77]

Ran into this in BS4.1 today. Problem occurs when using "col" but not "col-9" https://codepen.io/mavelo/pen/XxjVyv

Since it works in explicit vs auto, think this qualifies as "unintended behavior" 😉

Note: The solution from @Nickno95 achieves the desired result (added to my pen). Suggesting .col {overflow-x:auto;} for core unless it introduces other layout issues I have yet to encounter 🤔

Edit: The solution seems to work in all our layouts. Though it did require all descendant tables be wrapped in .table-responsive to prevent a horizontal scrollbar on the .col element itself on smaller devices (some tables did not previously warrant responsive wrapper, only _slightly_ larger than smallest tested viewport)

[mdo]

Thinking we should close this as a won't fix—we shouldn't go adding overflow properties to our columns unnecessarily. Feel like it'd be asking for issues with positioning, cropped content, and more.

[ysds]

Closing per last comment.