CSS で「display: table-cell」を使用する方法と理由

データが正常に追加されたことがわかります。

ステップ 2: 「table-content」コンテナーのスタイルを設定する

メイン div にアクセスするには、「 #テーブルコンテンツ '、 どこ ' # 」は、指定された「 ID 」 div コンテナーの属性。次に、次のプロパティを適用します。

ここ：

• • 「 画面 」プロパティは、要素の外観を定義および決定します。そのために、このプロパティの値は「 テーブル 」 テーブルを作成します。
  • 「 パディング 」は、コンテナー内のスペースを割り当てます。

ステップ 3: スタイル「tr-div」コンテナ

次に、「 tr-div 」コンテナは次のとおりです。

上記のコードブロックによると、「 画面 」プロパティ値は「 テーブル行 」は、データがテーブル内の行の形式で設定されることを意味します。 背景色 ”プロパティは要素の裏側の色を指定するために利用され、最後に” パディング 」が適用されます。

ステップ 4: 「td-div」コンテナに「display: table-cell」プロパティを適用する

「」を使用して 3 番目の div にアクセスします。 .td-div 」 ドット選択とそれぞれの id を指定し、以下に示す CSS プロパティを適用します。

• • 「の値 画面 」プロパティは「 テーブルセル 」は、セルを作成し、セルにデータを追加するために利用されます。
  • 「 幅 」は、表セルの横方向のサイズを指定します。
  • 「 国境 」は、セルの周囲の境界を定義します。
  • 「 マージン 」プロパティは、定義された境界線の外側にスペースを割り当てます。
  • 「 パディング 」は、境界内のスペースを指定します。

出力

CSS で「display: table-cell」を使用する理由

「 表示: テーブルセル 要素を表のように振る舞うデータに表示を設定するには、CSS プロパティを使用します。したがって、ユーザーは、テーブル要素やその他の要素 (td や tr など) を使用せずに、HTML でテーブルの複製を作成できます。より具体的には、彼のプロパティはテーブルの形式でデータを定義します。

結論

「を使用するには 表示: テーブルセル 」 CSS プロパティ、ネストされた div コンテナーを作成し、特定の名前で各コンテナーにクラスを挿入します。次に、CSS で div コンテナーにアクセスし、「display: table-cell」プロパティを適用します。 画面 」プロパティは、表のセルにデータを設定するために利用されます。この投稿では、display:table-cell CSS プロパティを利用する方法を示しました。