IE7対応のレスポンシブなtableもどき(jQuery使用)
jQueryはメディアクエリをIE7とIE8に適用させるために「css3-mediaqueries.js」と、子要素の高さを揃える「heightLine.js」を使用。
加えて、classの自動付与とウィンドウリサイズをトリガーにした分岐にも使用。
要素内の文章量が変わっても破綻しなくなった反面、分岐(とコードの書き方)により処理が重くなった。
tableサンプル 3
-
- 見出し
- 内容
-
- no.1
- data1 data1 data1 data1
-
- no.2
- data2
-
- no.3
- data3 data3
-
- no.4
- data4
-
- no.5
- data5 data5 data5 data5 data5 data5
-
- no.6
- data6
-
- no.7
- data7
-
- no.8
- data8
-
- no.9
- data9
-
- no.10
- data10
tableサンプル 4
-
- 出演順序
- 出演動物名
- 出演日時
-
- no.1
- Rat
- 1914年 1927年
-
- no.2
- Ox
- 1915年 1928年 1940年
-
- no.3
- Tiger
- 1916年
-
- no.4
- Hare
- 1917年
-
- no.5
- Dragon
- 1918年
-
- no.6
- Sprent
- 1919年