ブラウザがCSS2に正しく対応していればCSSだけでテーブルを縦並びに変えられるお
この表組み内の全セルを,縦並びに変更したいとする。
table要素でレイアウトした場合,このような変更はしんどい。
HTMLソースを書きなおして,テーブルの全行を2行ずつに分割する必要がある。この変更作業において,「文書の構造」は変わっていないつもりだ。(それを表現するのはHTMLのはず)
ただ単に「見せ方」を変えたいだけなのだ。(それを表現するのはCSSのはず)
にも関らず,HTMLソースを全部書き直さないといけない。おかしいと思わないか?
ま、例によって、おかしいのはtable要素へのdisplayプロパティに対応してないIEなんすけどね…。
table関連要素へのdisplayに対応していれば…
table, tbody, thead, tfoot, tr, th, td { display: block; }
これだけで縦並びになる。枠線や背景色等はお好みでどーぞ。あと、IE9なら対応してると思うけどWindows持ってないので確かめようがないす…