responsive-tables.jsを使って、table要素をレスポンシブに

スマートフォンなどの小型デバイス画面でもセルの内容を確認できるようにしたレスポンシブなtableです。PCでの確認は、ブラウザ画面の幅を小さくしていくと、横幅767px以下で、2番目のカラム以下がグループになり、横スクロールバーがでます。(3)で、1番目のカラムにも独立した横スクロールバーがでます。さらに小さくすると、横幅478px以下で、(2)にも、1番目のカラムに独立した横スクロールバーがでます。
現在のブラウザ画面横幅: ピクセル

(1) 各セルが短い文字列のみのtable要素

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
row 1, cell 1 row 1, cell 2 row 1, cell 3 row 1, cell 4 row 1, cell 5 row 1, cell 6 row 1, cell 7 row 1, cell 8
row 2, cell 1 row 2, cell 2 row 2, cell 3 row 2, cell 4 row 2, cell 5 row 2, cell 6 row 2, cell 7 row 2, cell 8
row 3, cell 1 row 3, cell 2 row 3, cell 3 row 3, cell 4 row 3, cell 5 row 3, cell 6 row 3, cell 7 row 3, cell 8
row 4, cell 1 row 4, cell 2 row 4, cell 3 row 4, cell 4 row 4, cell 5 row 4, cell 6 row 4, cell 7 row 4, cell 8

(2) 幅の大きなカラムがまじるtable要素

Perk Description ID Skill Req Perk Req
Steel Smithing Can create Steel armor and weapons at forges, and improve them twice as much. 000cb40d
Arcane Blacksmith You can improve magical weapons and armor. 0005218e 60 Smithing Steel Smithing
Dwarven Smithing Can create Dwarven armor and weapons at forges, and improve them twice as much. 000cb40e 30 Smithing Steel Smithing
Orcish Smithing Can create Orcish armor and weapons at forges, and improve them twice as much. 000cb410 50 Smithing Dwarven Smithing
Ebony Smithing Can create Ebony armor and weapons at forges, and improve them twice as much. 000cb412 80 Smithing Orcish Smithing
Daedric Smithing Can create Daedric armor and weapons at forges, and improve them twice as much. 000cb413 90 Smithing Ebony Smithing
Elven Smithing Can create Elven armor and weapons at forges, and improve them twice as much. 000cb40f 30 Smithing Steel Smithing

(3) 最初のカラムのみが特に大きなtable要素

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 1, cell 2 row 1, cell 3 row 1, cell 4 row 1, cell 5 row 1, cell 6 row 1, cell 7 row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 2, cell 2 row 2, cell 3 row 2, cell 4 row 2, cell 5 row 2, cell 6 row 2, cell 7 row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 3, cell 2 row 3, cell 3 row 3, cell 4 row 3, cell 5 row 3, cell 6 row 3, cell 7 row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 4, cell 2 row 4, cell 3 row 4, cell 4 row 4, cell 5 row 4, cell 6 row 4, cell 7 row 4, cell 8

※引用、参考:http://www.zurb.com/playground/responsive-tables