HTML で垂直テーブルを作成するには?

HTML での垂直テーブル レンダリング

伝統的に、HTML テーブルはデータをページ全体に行を配置して水平に表示します。ただし、ヘッダーが左側に配置され、行が垂直に表示される垂直テーブルが必要な場合があります。

これを実現するには、CSS を使用してテーブルの表示プロパティを変更できます。

tr { display: block; float: left; }
th, td { display: block; }

この CSS は、テーブルの行 ( 要素) を列のように動作させ、垂直に表示します。テーブル ヘッダー () とテーブル データ () も両方とも垂直方向に表示されます。

ただし、このアプローチではテーブルの動作が排除され、一般的なテーブルには適さないことに注意することが重要です。操作。これを解決するには、CSS 境界線の折りたたみを使用できます。

/* border-collapse */
tr>* { border-top: 0; }
tr:not(:first-child)>* { border-left: 0; }

この CSS により、(列全体ではなく) 表のセル間にのみ境界線が表示され、適切に境界線が付いた表のように見えます。

これらの CSS ルールを実装すると、HTML で垂直方向の表を作成でき、データをより柔軟に表示できるようになります。

以上がHTML で垂直テーブルを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。