CSSのdisplay: table-cellを使って要素横並びに配置する方法

要素をCSSで横並びに配置する方法はいくつかあります。横並びに配置する方法というと、floatを最初に思いつく人も多いかと思います。

今回紹介するdisplay: table-cellを使った要素を横並びにする方法は、他の方法と違ったメリットがある為、要素を横並びにする際是非検討してみてほしい方法です。

display: table-cellの使い方

display: table-cellは基本的に、親要素にdisplay: tableを指定して、親要素をテーブルにします。そして、子要素にdisplay: table-cellを指定して、小要素をテーブルのセルとして使用する使い方をします。

こうすることで、テーブルを使用しているようにレイアウトをすることが可能になります。

親要素{
    display: table;
}

小要素{
    display: table-cell;
}

また、親要素にtable-layout: fixed;を指定することで、小要素の幅を均等にすることもできます。その場合は、親要素の幅をwidthで指定しておく必要があります。次のようになります。

親要素 {
    display: table;
    table-layout: fixed;
    width: 800px;
}

また、border-collapseを使用することで、横並びの要素の隙間を指定することができます。border-collapseはセルのボーダーの表示を指定するプロパティです。

重ねて表示するcollapseか、間隔をあけて表示するseparateの値を入れて使用します。