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

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

Horizontal

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

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



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

そんなときはこれをつけるだけ
td の折り返しをなくすだけで table の display とかはイジらなくてもおっけいです



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

Vertical

次が縦版

ちょっとめずらしいですが 横縦切り替えるデザインなどで 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 にして移動先の座標を入れることになりそうです

まとめ

Chrome の transitional モードみたいな一部を除けば table でも普通に CSS な考えでやってみるといい感じに出来ました

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

サンプル