Panel with tables doesn't resize properly

[dkarkar92]

I have a panel with a table inside and the table has a few columns making it rather wide. If you view the panel table on a mobile device the table is wider than the panel making it look bad.

This only occurs on tables that are quite wide. I've tried using table-responsive and the issue still occurs. This occurs when the word is too long to \n to the next line. Simple fix would be to just make the panel width move with the table width.

Tested on Chrome and Firefox for Mac with the latest versions.

http://jsbin.com/bixetifi/1

Image:

[cvrebert]

The div.table-responsive should be the parent of the table, not the whole panel: http://jsbin.com/jugoyige/2

[dkarkar92]

Ok changed it on my pages, and it fixed the problem at mobile res, but it still occurs around 700-1000px. The table may not be ideal (3 long urls) but, it's still an issue.

http://jsbin.com/jugoyige/6/

[saas786]

Hi @Enviii its not a core issue, for your project specific needs you can enable responsiveness for table for all devices, currently by default it applies responsiveness to only extra small devices (<768px).

Please refer to this
https://github.com/twbs/bootstrap/blob/master/less/tables.less#L165

and close the issue here.

[cvrebert]

This issue seems legitimate to me.

[alrick]

+1
@saas786 Thanks for the tip pending the fix.

[mdo]

Yeah, I imagine we'll have to bump the breakpoint for where the responsive table kicks in from small to medium, which is rather high at around 900px. I'm torn on what to do here honestly.

[maxgronlund]

maybe text-overflow:ellipsis; and overflow:hidden could be used to fix my issue, with graphical elements it would'n

[mdo]

Put the .table-responsive within the .panel: http://jsbin.com/bixetifi/2/edit.

[alrick]

Hi @mdo

Your solution isn't working on all cases, I've added some cols to your test table.
Check the jsbin, open the output in a single window and try to downsize, the content overflows the panel under ~ 1000px large.

Jsbin : http://jsbin.com/bixetifi/3/edit
Result : https://www.dropbox.com/s/o5epxuyc45odvxr/Screenshot%202014-07-16%2014.38.28.png

[apexskier]

Would adding overflow-x: auto to .table-responsive be an acceptable solution? It looks fine in my tests, but I'm haven't tested on windows.

Before:

After:

edit: To clarify, this is not within a media query, just the default action.