垂直 HTML テーブル

垂直行を含む HTML テーブルを作成すると、行ヘッダーが垂直方向に配置されて、データを表示する独自の方法が提供されます。上というよりは左側。これを実現するには、CSS スタイルを適用してテーブルの構造を変換します。

CSS スタイリング

テーブルの行を垂直列としてレンダリングするには、次の CSS ルールを使用します。使用できます:

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

これにより、テーブルのセルが垂直方向に流れ、対応するヘッダーが各行の左側に表示されます。

AngularJS Integration

列として表示されるようになったテーブルの行へのアクセスを維持するには、次の CSS を組み込むことで実現できます。ルール:

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

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

これらのルールにより、表のセル間の境界線が端にのみ表示され、行間の明確な区別が保証されます。これらの手法を AngularJS と組み合わせて使用​​すると、垂直方向を維持しながらテーブル データを動的に操作できます。