IE7対応のレスポンシブなtableもどき(jQuery使用)

jQueryはメディアクエリをIE7とIE8に適用させるために「css3-mediaqueries.js」と、子要素の高さを揃える「heightLine.js」を使用。

加えて、classの自動付与とウィンドウリサイズをトリガーにした分岐にも使用。

要素内の文章量が変わっても破綻しなくなった反面、分岐(とコードの書き方)により処理が重くなった。

tableサンプル 3

  1. 見出し
    内容
  2. no.1
    data1 data1 data1 data1
  3. no.2
    data2
  4. no.3
    data3 data3
  5. no.4
    data4
  6. no.5
    data5 data5 data5 data5 data5 data5
  7. no.6
    data6
  8. no.7
    data7
  9. no.8
    data8
  10. no.9
    data9
  11. no.10
    data10

tableサンプル 4

  1. 出演順序
    出演動物名
    出演日時
  2. no.1
    Rat
    1914年 1927年
  3. no.2
    Ox
    1915年 1928年 1940年
  4. no.3
    Tiger
    1916年
  5. no.4
    Hare
    1917年
  6. no.5
    Dragon
    1918年
  7. no.6
    Sprent
    1919年