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

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

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

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

<table>  
  <thead>  
    <tr>  
      <th>Company</th>  
      <th>Contact</th>  
      <th>Country</th>  
    </tr>  
  </thead>  
  <tbody>  
  <tr>  
    <td>Alfreds Futterkiste</td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro Moctezuma</td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>    
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro  </td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  </tbody>  
</table>

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

単なる別の HTML テーブル

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

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

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

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

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

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

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

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

1. と には CSS グリッド レイアウト*t* を使用します 。
2. 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 を少し組み込むことで、各列にデータ ラベルをシームレスに追加し、ラベルと対応するセルの間の関連付けを強化できます。

   <table>  
     <thead>  
       <tr>  
         <th>Company</th>  
         <th>Contact</th>  
         <th>Country</th>  
       </tr>  
     </thead>  
     <tbody>  
     <tr>  
       <td>Alfreds Futterkiste</td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro Moctezuma</td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>    
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro  </td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     </tbody>  
   </table>
   

   今はこんな感じです

   

   デモ

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

   結論

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

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

   著者について

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

以上がCSS のみを使用して HTML テーブルをカード ビューに変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。