1 display:table-cell のメリットと注意点. 目次. display: table; を指定したした要素はそのままだとこ要素分しか広がらないので、画面横幅いっぱいに広げるためにwidth: 100%;を指定している。 width: 100%; を指定しなかった場合 display: table-cell; で指定した子要素どうしに間隔をあけたい場合 子要素にmarginを指定するのでなく、親要素 … CSSのdisplayはマークアップするには絶対に必要なスタイルの1つですよね。その中でtableやtable-cellは業務でなんとなく使っていますが断片的にしか理解していなかったので、今日はそれらのまとめブログを書いてみたいと思います。Special Thanks to https://flic.kr/p/iNeYy7 displayプロパティは、ボックスの種類を指定します。CSS3におけるdisplayプロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。 display: table;による多段カラムは、フレキシブルに横方向に伸縮させることができます。そして、縮めてもfloatのレイアウトように崩れることはありません。 HTML. ul {display:table;} ul li {display:table-cell;} とした場合、テーブルを使ったようなレイアウトの段組が表現できます。 display:table-cell; 先ほども述べたように、floatを使わずに横並びにすることができます。 td要素のような表示になります。 div {display:table-cell;} 1.1 display:table-cell のメリット; 1.2 display:table-cell の注意点; 2 display:table-cell の基本的な使い方; 3 親要素に display:table を指定し、テーブル扱いとする; 4 均等幅で配置するために、親要素に table-layout:fixed を指定 table. display:table と display:table-cell を指定しただけで、全然違う要素に table要素、td要素のスタイルが適用できるってオモシロ〜イ。いきなりtable用のCSSが使えるようになるのね。 table関連の要素が使えるようになると、1番のメリットは、 vertical-alignプロパティが適用 できるようになること。 11行目 … さて、今回はこちら 【display:table;】 です ここでは 【display:table;】 とそれに付随する 【display:table-cell;】 などもあわせて一挙にご紹介します。.