Remove calculated width for scrollable tables #10897
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
width: auto on a table ready for scroll reverts the default where browsers calculate a width. This overrides a stylesheet declaring table width:100%. A table that needs scrolling somewhere between the medium and large breakpoints will collapse because the column width is set by the widest unbreakable content in the cells.
ncoden
approved these changes
Feb 8, 2018
There was a problem hiding this comment.
Tested on:
- Windows 7 (IE 8/9)
- Windows 8 (IE 10)
- Windows 10 (IE 11, Edge 14/15/16, Firefox v57, Chrome v53, Opera v49, Safari v5.1)
- macOs 10.13 (Firefox v57, Chrome v63, Opera v49, Safari v11)
- iOS 7 (Phone 5s: Safari, Chrome), iOS 10 (iPhone 7: Safari)
- Android 7 (Galaxy S8: Firefox v51, Chrome v58)
✅ Everything works well. We can merge.
|
Thanks @nicwinn for the PR. 👍 |
ncoden
pushed a commit
to ncoden/foundation-sites
that referenced
this pull request
Jun 16, 2018
8fbe9c3 Remove calculated width for scrollable tables Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
This was referenced Jun 16, 2018
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Setting
width: autoon a table reverts to default where browsers calculate a width. It overrides stylesheets that declare a table width (without!importantthat is) For example: I havetable{width:100%}and control widths using containers. A table that needs scrolling somewhere between medium and large breakpoints will collapse because the column width is set by the widest unbreakable content in the cells.