table タグの CSS
◆ table で縦や横に並べる
◆ 横にならぶときに 100% を超えられないのは nowrap を使えば横に並べられる
◆ 縦にならべるときは tr を inline-block で td を block にすればできる
◆ 横にならぶときに 100% を超えられないのは nowrap を使えば横に並べられる
◆ 縦にならべるときは tr を inline-block で td を block にすればできる
table って便利ですが 扱いづらいです
CSS の display も専用のものがありますし 他みたいに自由にスタイルをいじりづらいです
とりあえず困りそうな 2 パターンの対処方法の紹介です
ところで Horizonal じゃなくて Horizontal らしいです
table タグは普通のブロック要素のように 前後で改行されますが 幅が内側に応じて変わります
最大でも table タグの 100% の幅なので はみ出ないのでこんなことが起きます

横長なテーブルをスクロールで見たい時に不便ですよね
td が多いと横幅が 1 文字分で縦読みになってたりしますし
そんなときはこれをつけるだけ
td の折り返しをなくすだけで table の display とかはイジらなくてもおっけいです

strict モードでも transitional モードでも動きます
ちょっとめずらしいですが 横縦切り替えるデザインなどで tr と td の構造を変更するのが大変だから CSS だけでなんとかしたいものです
CSS はこうなります
td を block にして td が縦に並ぶようにします
そして tr を inline-block にして tr が横に並ぶようにします
横にずっと並ぶように tbody で改行しないようにします
table や tbody の display はもとのままで大丈夫です

strict モードであれば Chrome でも Firefox でも動いたのですけど transitional モードの Chrome では動かなかったです
td の block 指定が無効で全部が横に並んでしまいます
良い対処方法が見つからなかったのですが tr に white-space:pre を設定して td を HTML に 1 行ずつ書けば一応縦には並びました
変に隙間ができるので 改行以外のインデントは消して td の display は block でなく inline-block にしておけば一見大丈夫そうには見えます
それと 全部に影響ある注意点もあります
ただの block にして改行してるせいで 要素の高さが違うと縦の位置が揃わないです
table 全体の高さが縦長の tr のブロックの中で一番大きい物に合わされて 他の tr は tr の単位で上下中央揃えになります
N 番目の td は全部同じ height になるようにしておけば大丈夫です
あと 例にあげた縦横の切り替えですが もし綺麗にアニメーションで転置行列になるように要素を動かしたいのなら この方法は使えないです
display の切り替えなのでアニメーションしないです
やるとすれば 通常の並びのときに要素のサイズを取得しておいて 縦にしたときにどこに配置されるかを計算しておいて td すべてを absolute にして移動先の座標を入れることになりそうです
サンプルおいておきます↓
サンプル
CSS の display も専用のものがありますし 他みたいに自由にスタイルをいじりづらいです
とりあえず困りそうな 2 パターンの対処方法の紹介です
Horizontal
横方向に並んでる普通なやつですところで Horizonal じゃなくて Horizontal らしいです
table タグは普通のブロック要素のように 前後で改行されますが 幅が内側に応じて変わります
最大でも table タグの 100% の幅なので はみ出ないのでこんなことが起きます

横長なテーブルをスクロールで見たい時に不便ですよね
td が多いと横幅が 1 文字分で縦読みになってたりしますし
そんなときはこれをつけるだけ
td{white-space: nowrap;}
td の折り返しをなくすだけで table の display とかはイジらなくてもおっけいです

strict モードでも transitional モードでも動きます
Vertical
次が縦版ちょっとめずらしいですが 横縦切り替えるデザインなどで tr と td の構造を変更するのが大変だから CSS だけでなんとかしたいものです
CSS はこうなります
tbody{white-space:nowrap;}
tr{display:inline-block;}
td{display:block;}
tr{display:inline-block;}
td{display:block;}
td を block にして td が縦に並ぶようにします
そして tr を inline-block にして tr が横に並ぶようにします
横にずっと並ぶように tbody で改行しないようにします
table や tbody の display はもとのままで大丈夫です

strict モードであれば Chrome でも Firefox でも動いたのですけど transitional モードの Chrome では動かなかったです
td の block 指定が無効で全部が横に並んでしまいます
良い対処方法が見つからなかったのですが tr に white-space:pre を設定して td を HTML に 1 行ずつ書けば一応縦には並びました
変に隙間ができるので 改行以外のインデントは消して td の display は block でなく inline-block にしておけば一見大丈夫そうには見えます
それと 全部に影響ある注意点もあります
ただの block にして改行してるせいで 要素の高さが違うと縦の位置が揃わないです
table 全体の高さが縦長の tr のブロックの中で一番大きい物に合わされて 他の tr は tr の単位で上下中央揃えになります
N 番目の td は全部同じ height になるようにしておけば大丈夫です
あと 例にあげた縦横の切り替えですが もし綺麗にアニメーションで転置行列になるように要素を動かしたいのなら この方法は使えないです
display の切り替えなのでアニメーションしないです
やるとすれば 通常の並びのときに要素のサイズを取得しておいて 縦にしたときにどこに配置されるかを計算しておいて td すべてを absolute にして移動先の座標を入れることになりそうです
まとめ
Chrome の transitional モードみたいな一部を除けば table でも普通に CSS な考えでやってみるといい感じに出来ましたサンプルおいておきます↓
サンプル