From f001c63c5b2745fec4349828d8bf9371e7a4f63c Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Tue, 23 Feb 2016 15:38:31 -0800 Subject: [PATCH] Fix overflowing table in IE9 by recommending new HTML for a scrolling table --- docs/pages/table.md | 209 ++++++++++++++++++++---------------- scss/components/_table.scss | 8 ++ 2 files changed, 123 insertions(+), 94 deletions(-) diff --git a/docs/pages/table.md b/docs/pages/table.md index 9c9c57c19..da94ba5c3 100644 --- a/docs/pages/table.md +++ b/docs/pages/table.md @@ -4,7 +4,8 @@ description: Okay, they're not the sexiest things ever, but tables get the job d sass: scss/components/_table.scss --- -## Basic Table +## Basics + No bells or whistles here, just a straight up table for all of your basic table needs. ```html_example @@ -42,10 +43,15 @@ No bells or whistles here, just a straight up table for all of your basic table --- -## Hover Table -Need to spiff up the table just a tad? Just add the class .hover lightly darken the table rows on hover. +## Hover State + +Need to spiff up the table just a tad? Just add the class `.hover` lightly darken the table rows on hover. + +```html + +
+``` -```html_example @@ -76,13 +82,18 @@ Need to spiff up the table just a tad? Just add the class .hover li
-``` --- + ## Stacked Table -Sometimes you just need to stack a table. Just add the class .stack to your table. -```html_example +Sometimes you just need to stack a table. Just add the class `.stack` to your table. + +```html + +
+``` + @@ -113,95 +124,105 @@ Sometimes you just need to stack a table. Just add the class .stack
-``` --- -## Scroll Table -Got a lot of tubular tabular data? Add the class .scroll to your table to enable horizontal scrolling to your table! +## Scrolling Table -```html_example - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
This is the description!OneTwoThreeFourFiveSixSevenEightNineTenElevenTwelve
These are all the words that people use to describe Foundation 6!CoolSwagChillKillerRadBallerOMGSweetAwesomeBeastDopeTubular
These are some words that people use to describe other web frameworks.WhatevsUgh.LOLKAightEh.Grrr...Meh.TTYLBleh.Really?Why?
Here are some great super heros.BatmanSupermanSpidermanWonder WomanHulkNicolas CageAntmanAquamanCaptain AmericaWolverineThorIron Man
Here's a footer, just in case
+Got a lot of tubular tabular data? Add a wrapper element with the class `.table-scroll` around your table to enable horizontal scrolling. + +
+

The wrapping element was added in Foundation 6.2—prior to that, you just added the class .scroll to the table itself. However, this method doesn't work great with Internet Explorer 9. If you don't need IE9 support, you can just add .scroll to your table, and the wrapping element isn't necessary. +

+ +```html +
+
+
``` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
This is the description!OneTwoThreeFourFiveSixSevenEightNineTenElevenTwelve
These are all the words that people use to describe Foundation 6!CoolSwagChillKillerRadBallerOMGSweetAwesomeBeastDopeTubular
These are some words that people use to describe other web frameworks.WhatevsUgh.LOLKAightEh.Grrr...Meh.TTYLBleh.Really?Why?
Here are some great super heros.BatmanSupermanSpidermanWonder WomanHulkNicolas CageAntmanAquamanCaptain AmericaWolverineThorIron Man
Here's a footer, just in case
+
diff --git a/scss/components/_table.scss b/scss/components/_table.scss index a8365e034..384666bd2 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -223,4 +223,12 @@ $show-header-for-stacked: false !default; table.hover { @include table-hover; } + + .table-scroll { + overflow-x: auto; + + table { + width: auto; + } + } } -- 2.47.2