Horizontal Scroll a Table “In Place”

This is a a pretty cool trick for mobile where the amount of information you want to display just isn’t going to fit in the width available. Have the table horizontally scrollable …

ID First Name Last Name Email IP Address App Company Country Hash Registered Completed Confirmed Eyes Hair Favorite
1 Thomas Perez tperez0@craigslist.org 100.208.33.222 com.myspace.Toughjoyfax Brightbean South Africa 1LqnJGirgwjyMSHxTRRrSbxv5TuuxZTLwK false false false “Puce Pink Yellow
2 Michelle Nelson mnelson1@dyndns.org 132.105.223.121 gov.nps.Fintone Bubblebox China 17ANZgWGNB2B75qoRXS8NrxNYhwf67VBV3 true false false “Green Aquamarine Red
3 Carolyn Ramos cramos2@themeforest.net 241.207.38.235 com.kickstarter.Quo Lux Zooxo Brazil 16ypa5ZrLoTPQa3dsSWN2aGJQsSq494msa false false false “Fuscia Khaki Pink
5 Gloria Kelly gkelly4@google.cn 20.166.10.83 com.stumbleupon.Bigtax Meevee Bulgaria 15MyxCQerGT64DHKZjQvb8bRgTvQDxPEVW true false false “Orange Orange Mauv
6 Heather Elliott helliott5@adobe.com 53.172.163.238 io.pen.Matsoft Jabbertype Russia 1ctfF4kTwX4G7VtjmPqA3jDSVaecEUEpj false false true “Fuscia Mauv Khaki
7 Chris Alvarez calvarez6@godaddy.com 180.241.181.236 org.bbb.Mat Lam Tam Voomm Cyprus 1HZQu9rRYyYdTqLBgri268yE9g3ssh6oQZ true false false “Goldenrod Khaki Goldenrod
8 Rebecca Ramos rramos7@twitpic.com 33.184.157.226 gov.cdc.Voyatouch Centizu Latvia 1LREwA3au2AFsssgV3k58LDkBDQqMhwJPi false false true “Puce Pink Goldenrod
9 Cheryl Walker cwalker8@census.gov 202.93.128.99 com.histats.Holdlamis Twitterwire China 16Z6gUpUVcPFaiWfD8Mg7RPUhXhJJHjxJM false true false “Teal Maroon Turquoise
10 Lawrence Jacobs ljacobs9@wordpress.org 126.204.15.152 com.patch.Cookley Latz China 168Zpb6b9jCrNFzQ1WJeYwdAEAsfg5Q7Y7 true false false “Mauv Red Orange
11 Larry Morgan lmorgana@reverbnation.com 156.120.22.150 uk.nhs.Y-find Fiveclub China 1BUE62CFLctCnoNcL1fFPfPjXEtfjqo3aC true true false “Teal Green Violet
13 Elizabeth Myers emyersc@amazon.com 92.24.59.86 com.java.Otcom Voolia Indonesia 14fsux3DUUsZpUxims3HnzanxZuFP174Px true false true “Goldenrod Fuscia Pink
14 Jeffrey Hernandez jhernandezd@examiner.com 103.86.221.117 com.blogtalkradio.Zontrax Zoovu Ivory Coast 1Lg8itU8pTn1thF82rvqfjMWo4R1esbzPc false true false “Fuscia Violet Red
15 Roger Burns rburnse@symantec.com 21.10.159.170 br.com.uol.Keylex Yodoo Portugal 1Kv5osyo26akrsjjAkN1tmLR5yuxrro4dQ false false false “Pink Indigo Mauv
16 Ryan Burns rburnsf@sciencedaily.com 148.255.43.122 fr.free.Sub-Ex Cogibox Philippines 168XyNGMe2aQkbQnj2zV1TndncUCiZsx3f true false false “Mauv Maroon Indigo
17 Philip Cunningham pcunninghamg@i2i.jp 190.212.13.154 com.sbwire.Bigtax Yata Argentina 1BPNVNMkovTu18ooLeKgZfReLsNjSm4Q1n false false false “Khaki Purple Fuscia
18 Diana Armstrong darmstrongh@arizona.edu 37.1.31.159 gov.ed.Viva Npath China 14EYfzQ4pZ5CkkckkGZbEr6KmYVhyKL4UM true true false “Goldenrod Turquoise Purple
19 Brian Berry bberryi@sfgate.com 37.65.135.186 gov.senate.Span Topicshots China 1Ez7qMkjt2o7j55mRRMYviQFtX9n5CMAx3 false true false “Crimson Aquamarine Puce
20 Steve Clark sclarkj@blinklist.com 235.174.174.154 uk.co.amazon.Alphazap Kwilith Russia 1MowPLi2JQqBLEwGpC5xM9xFXZt6P96tkw true false true “Orange Yellow Purple

This is achieved with overflow-x: auto on the containing div, width: 600% on the table and normal widths adding up to 100% on the columns.

Leave a Reply

Your email address will not be published.