table
行と列を入れ替えて表示するセマンティックCSSまたはHTMLプロパティ/属性はありますか?
言い換えれば、私はコードを一方向に書きたいのですが、行と列を反転させるものがあり、その逆もあります。
周りを見回すと、JavaScriptでそれらを交換する方法しか見つかりませんでしたが、私の場合は、それは私が探しているものではありません。(CSS / HTMLソリューションがない場合は、コードをリファクタリングしたいと思います。)
table
行と列を入れ替えて表示するセマンティックCSSまたはHTMLプロパティ/属性はありますか?
言い換えれば、私はコードを一方向に書きたいのですが、行と列を反転させるものがあり、その逆もあります。
周りを見回すと、JavaScriptでそれらを交換する方法しか見つかりませんでしたが、私の場合は、それは私が探しているものではありません。(CSS / HTMLソリューションがない場合は、コードをリファクタリングしたいと思います。)
私はあなたの懸念を理解していますが、現時点では答えはノーです:
HTMLとCSSだけでそれを行うためのクリーンな方法はありません。(テーブルのセルを90°回転させるのは間違いなく興味深いですが。)
あなたがあなた自身に提案したように、この状況にはいくつかのオプションがあります:
コードのリファクタリング(たとえば、スクリプト/自動化を使用してテーブルを手動で再コーディングするか、Google Docsスプレッドシートで実行してHTMLとしてエクスポートする-数年前は可能でした)。
リファクタリングしたくない場合は、JavaScriptを使用して切り替えを行います。または、JavaScriptを関数として使用して、リファクタリングされたコードを元に戻します。サイトに「。」というボタンがある場合に備えて"Flip Table"
。
CSSを使用してセルを回転させる提案された実験的な方法を試してみてください。
それはあなたが望むものとあなたの実装の詳細に依存します。プログレッシブエンハンスされたJaveScriptは、ほとんどの人の本ではクリーンなコードだと思います(ただし、この場合、JSなしでアクセスすると元のHTMLテーブルが表示されるため、正常に機能が低下することはありません)。検索エンジンもJSを取得します。
申し訳ありませんが、ありません。
テーブル全体を90度回転させてから、セルを反対方向に90度回転させることで、何かを近づけることができます。見栄えを良くするために、すべての要素の高さと幅を手動で設定する必要もあります。
ただし、これは大きなハックになります。私は本当にそれをお勧めしません。
これに対する他のCSSソリューションはありません。確かに「標準的な」ものではありません。やりたいことは、必ずしも標準的なことではありません。
しかし、実際には少なくとも2つの異なるCSSソリューションがあります。
David Bushellによるこのソリューションがあります(flexboxを使用): http ://dbushell.com/2016/03/04/css-only-sensitive-tables/
そしてこの解決策(floatを使用)
tr { display: block; float: left; }
th, td { display: block; }
私が知っていることではありません。次のようなことをしたいようです。