CSS テーブルセル属性の使用方法

table-cell は、inline 要素や block 要素と同様に、display 属性で表される表示フォームであり、テーブルや Excel のセルを作成するために使用できます。 CSS のテーブルセル属性。

まず、table-cell 属性の基本概念を紹介します。

table-cell は、display 属性の値であり、次のように指定できます。 table タグ 子要素のスタイル。

でも、「要素を簡単に並べることができる」ように見えると思います。

最初の「table」のこの部分には、table タグがあります。いわゆるWebサイトが普及し始めた頃、そのフレームワークは基本的にtableタグを使って行われていました。

HTMLタグ自体が表示必須なので「表示幅の差、縦に並べる」みたいなことはできず、完全に見えなくなりネットワークに反応するようになりました。

HTMLタグ自体を強制的に表に見せているため、「表示幅に合わせて並べるような」ことができず、今ではWebに全く反応しなくなっています。

「表」の「セル」について、エクセルなどで「セル」という言葉を聞いたことはありますか？つまり、display: table - cell; でテーブル内のフレームを再現できます。

通常のブロック要素とは動きが異なるので注意が必要です。

table-cell 属性の使用方法

基本的には、display: table; を使用してから、親要素で table-cell

を使用します。 ##例を見てみましょう

HTML

<p>apple</p> 
  </div> 
  <div class ="box orange"> 
    <p> oranges </p> 
  </div> 
  <div class ="box apple">
  <div class ="box grape"> 
    <p>grape</p> 
  </div> 
</div>

CSS

.container{
  display: table;
  width: 600px;
  height: 200px;
}
.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}
.apple{
  background: #ED3B2B;
  vertical-align: middle;
}
.orange{
  background: #E4642C;
  vertical-align: top;
}
.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

属性値を変更してさまざまな操作を試すことができますが、私はやりません。もっとエキサイティングなコンテンツについては、php 中国語 Web サイトの

CSS ビデオ チュートリアル 列に注目してください。 ！ ！

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