読者です 読者をやめる 読者になる 読者になる

CSSだけでtableを縦並びにする

CSS

ブラウザがCSS2に正しく対応していればCSSだけでテーブルを縦並びに変えられるお

この表組み内の全セルを,縦並びに変更したいとする。

table要素でレイアウトした場合,このような変更はしんどい。
HTMLソースを書きなおして,テーブルの全行を2行ずつに分割する必要がある。

この変更作業において,「文書の構造」は変わっていないつもりだ。(それを表現するのはHTMLのはず)
ただ単に「見せ方」を変えたいだけなのだ。(それを表現するのはCSSのはず)
にも関らず,HTMLソースを全部書き直さないといけない。おかしいと思わないか?

ま、例によって、おかしいのはtable要素へのdisplayプロパティに対応してないIEなんすけどね…。

table関連要素へのdisplayに対応していれば…

table, tbody, thead, tfoot, tr, th, td {
    display: block;
}


これだけで縦並びになる。枠線や背景色等はお好みでどーぞ。あと、IE9なら対応してると思うけどWindows持ってないので確かめようがないす…