シンプルで昔ながらの 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 テーブル

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

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

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

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

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

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

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

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

1. と には CSS グリッド レイアウト*t* を使用します 。
2. CSS 表示プロパティを使用して、すべての をブロック要素に設(shè)定します

   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 をさらに數(shù)行追加するだけです!

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

   テーブルをカードに変換する最後のカード トリックは、CSS グリッド プロパティ Grid-template-columns を使用することです。

   table tbody {  
     display: grid;  
     grid-template-columns: repeat(4, 1fr);  
   }
   

   grid-template-columns は、CSS グリッド レイアウトでグリッドの列の構(gòu)造を定義するために使用される CSS プロパティです。列の數(shù)、列の幅、グリッド內(nèi)のスペースの分割方法を指定します。

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

   最終的なカードビュー

   

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

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

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

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

   JavaScript を少し組み込むことで、各列にデータ ラベルをシームレスに追加し、ラベルと対応するセルの間の関連付けを強(qiáng)化できます。

   <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 次元空間の行と列の両方を完全に制御できるため、レイアウトのオプションは無限になります。

   結(jié)論

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

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

   著者について

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

以上がCSS のみを使用して HTML テーブルをカード ビューに変換するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。