CSS と AngularJS を使用して垂直 HTML テーブルを作成する方法

垂直 HTML テーブル

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

CSS スタイリング

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

<code class="css">tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}</code>

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

AngularJS 統合

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

<code class="css">/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

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

これらのルールにより、テーブル セル間の境界線が次の位置でのみレンダリングされることが保証されます。エッジにより、列間の明確な区別が可能になります。これらの手法を AngularJS と組み合わせて使用​​すると、垂直方向を維持しながらテーブル データを動的に操作できます。

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