◆ table で縦や横に並べる
◆ 横にならぶときに 100% を超えられないのは nowrap を使えば横に並べられる
◆ 縦にならべるときは tr を inline-block で td を block にすればできる

table って便利ですが 扱いづらいです
CSS の display も専用のものがありますし 他みたいに自由にスタイルをいじりづらいです

とりあえず困りそうな 2 パターンの対処方法の紹介です

Horizontal

横方向に並んでる普通なやつです
ところで Horizonal じゃなくて Horizontal らしいです

table タグは普通のブロック要素のように 前後で改行されますが 幅が内側に応じて変わります
最大でも table タグの 100% の幅なので はみ出ないのでこんなことが起きます

table01

横長なテーブルをスクロールで見たい時に不便ですよね
td が多いと横幅が 1 文字分で縦読みになってたりしますし

そんなときはこれをつけるだけ
td{white-space: nowrap;}

td の折り返しをなくすだけで table の display とかはイジらなくてもおっけいです

table02

strict モードでも transitional モードでも動きます

Vertical

次が縦版

ちょっとめずらしいですが 横縦切り替えるデザインなどで tr と td の構造を変更するのが大変だから CSS だけでなんとかしたいものです

CSS はこうなります
tbody{white-space:nowrap;}
tr{display:inline-block;}
td{display:block;}

td を block にして td が縦に並ぶようにします
そして tr を inline-block にして tr が横に並ぶようにします
横にずっと並ぶように tbody で改行しないようにします

table や tbody の display はもとのままで大丈夫です

table03

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 な考えでやってみるといい感じに出来ました

サンプルおいておきます↓

サンプル