ホームページ > 記事 > バックエンド開発 > CSS のみを使用して HTML テーブルをカードビューに変換する

CSS のみを使用して HTML テーブルをカードビューに変換する

DDDオリジナル: 2024-10-26 00:18:28557ブラウズ

シンプルで昔ながらの HTML テーブルを、従来の行と列を超えた動的なカードビューに変換する方法を探る最近の実験を共有したいと思います。

単純な HTML テーブルから始める

次のような単純な HTML テーブルから始めましょう。

f5d188ed2c074f8b944552db028f98a1  
  ae20bdd317918ca68efdc799512a9b39  
    a34de1251f0d9fe1e645927f19a896e8  
      b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
    fd273fcf5bcad3dfdad3c41bd81ad3e5  
  7943277d65306330563feb42dc8c705a  
  92cee25da80fac49f6fb6eec5fd2c22a  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5    
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  ca745a59da05f784b8811374296574e1  
f16b1740fad44fb09bfe928bcc527e08

ブラウザでレンダリングすると次のようになります。

Transform HTML Table into Card View Using Nothing But CSS

単なる別の HTML テーブル

特別なことは何もありません。

定義上、テーブルは行と列で構成されます。従来の行と列のレイアウトをよりダイナミックなものに変換するにはどうすればよいでしょうか?

CSS グリッドの力を発見する

テーブルは退屈である必要はありません。いくつかの簡単な CSS トリックを使用すると、従来の HTML テーブルを洗練されたリストまたはカードビューに簡単に変換できます。

一番良かった点は? JavaScript は使用せず、純粋な CSS だけを使用します!

CSS グリッドは 2007 年以来 W3C の推奨草案候補でしたが、現在のすべての主要ブラウザの最新バージョンで採用されています。

CSS グリッドは行と列の両方に設計されているため、表などの複雑なレイアウトに最適です。これにより、水平方向と垂直方向の両方の配置を同時に管理できるため、主に 1 次元 (行または列) である Flexbox よりもはるかに詳細な制御が可能になります。

使用する CSS グリッドプロパティ

とには CSS グリッドレイアウト*t* を使用します。
CSS 表示プロパティを使用して、すべてのをブロック要素に設定します
CSS グリッドプロパティを使用すると、プレーンな HTML テーブルがすでに魔法のように応答性の高いリストビューに変換され、各レコードが 1 つの列にきちんと表示されます。
```
table tbody, table thead {  
  display: grid;  
}  
table td {  
  display: block;  
}
```
見た目はおしゃれですが、ちょっと混沌としています。 CSS の境界線をいくつか散りばめて、リストの各行に少し余裕を持たせましょう。
```
table, th, tr {  
  border: 1px solid black;  
}
```
それでは。新しい外観をチェックしてください! JavaScript マジックを 1 行も使用せずに作成されたリストビューとしては、それほどみすぼらしいものではありません!

昔ながらの HTML テーブルから素敵なリストが作成されました。その素敵なリストをおしゃれなカードビューに変えるにはどうすればよいでしょうか?

ネタバレ注意: CSS をさらに数行追加するだけです!

リストをカードビューに変換

テーブルをカードに変換する最後のカードトリックは、CSS グリッドプロパティ Grid-template-columns を使用することです。
```
table tbody {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr);  
}
```
grid-template-columns は、CSS グリッドレイアウトでグリッドの列の構造を定義するために使用される CSS プロパティです。列の数、列の幅、グリッド内のスペースの分割方法を指定します。

repeat() 関数を使用すると、最初のパラメータで必要な列の数を決定できます。たとえば 4 列としましょう。きれいな概数が嫌いな人がいるでしょうか。 2 番目のパラメーターは、これらの列の大きさ (1fr、つまり使用可能な領域の 1 分の 1) を指示します。それは、コラムに「皆さんにはスペースのパイを平等に分けてもらいます!」とちょっとした叱咤激励を与えるようなものです。

最終的なカードビュー

少し時間を取ってコードを調べ、CodePen で結果をご自身で確認してください。ここは、CSS グリッドの変換を試したり遊んだりするのに最適な場所です。途中で楽しいサプライズも見つかるかもしれません。

CSS グリッドは応答性にも優れており、開発者はさまざまな画面サイズやデバイス間でレイアウトを調整およびリフローする方法を強化して制御できます。

オプション: データラベルをカードビューに追加する

カードビューは視覚的に魅力的ですが、列情報が明確ではないため、ユーザーは各カードに表示されるデータを推測することになります。

JavaScript を少し組み込むことで、各列にデータラベルをシームレスに追加し、ラベルと対応するセルの間の関連付けを強化できます。
```
f5d188ed2c074f8b944552db028f98a1  
  ae20bdd317918ca68efdc799512a9b39  
    a34de1251f0d9fe1e645927f19a896e8  
      b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
    fd273fcf5bcad3dfdad3c41bd81ad3e5  
  7943277d65306330563feb42dc8c705a  
  92cee25da80fac49f6fb6eec5fd2c22a  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5    
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  ca745a59da05f784b8811374296574e1  
f16b1740fad44fb09bfe928bcc527e08
```
今はこんな感じです

デモ

これは、最初の HTML テーブルとはまったく異なります。 CSS グリッドを使用すると、2 次元空間の行と列の両方を完全に制御できるため、レイアウトのオプションは無限になります。

結論

このチュートリアルは氷山の表面をなぞっただけです。より応答性の高いレイアウトを簡単に作成したり、要素を重ねたり、項目を複数の行または列にまたがったり、グリッド領域を動的に調整したりできるため、さまざまなレイアウトのニーズに非常に柔軟に対応できます。

グリディングを楽しんでください!

著者について

著者は、人気のある PHP データグリッドツール (phpgrid.com) を作成したベテラン Web 開発者であり、CRUD の力を利用して、少なくとも生活を簡素化したいと考えている開発者にとって世界をより良い場所にしています。