【CSS入門】要素を横並びにするには(table,table-cell)

こんにちは、もがちゃんです。

前回、要素を横並びにする時に使えるスタイルとして display:inline-block を紹介しましたが、今回はもっと使いやすいスタイルを紹介します。

今回紹介するスタイルは、tableタグを使用した時と同じような表現が可能になるスタイル（display:tableとdisplay:table-cell）です。

display:tableとdisplay:table-cellの使用例

比較するためtableタグを使用した例とdisplay:tableとdisplay:table-cellを使用した例を紹介します。

tableタグ使用の例

<html>
    <head>
        <title>tableタグ使用の例</title>
    </head>
    <body>
        <table border="1">
            <tr>
               <td>要素１の内容★★★★★★要素１の内容</td>
               <td>要素２の内容●●●●●●要素２の内容</td>
               <td>要素３の内容〇〇〇〇〇〇要素３の内容</td>
            </tr>
        </tabl>
    </body>
</html>

display:tableとdisplay:table-cell使用の例

<html>
    <head>
        <title>display:table display:table-cellスタイル使用の例</title>
        <style>
            .table {
                display: table;
                border: double;
                border-collapse: collapse;
            }
            .table-cell {
                display: table-cell;
                border: double;
            }
        </style>
    </head>
    <body>
        <div class="table">
           <div class="table-cell">要素１の内容★★★★★★要素１の内容</div>
           <div class="table-cell">要素２の内容●●●●●●要素２の内容</div>
           <div class="table-cell">要素３の内容〇〇〇〇〇〇要素３の内容</div>
        </div>
    </body>
</html>

display:tableとdisplay:table-cellの使用方

display:tableの指定は、display:table-cellを指定する要素の親要素に指定する。（tableタグ使用時のtable相当要素）
display:table-cellの指定は、横並びにしたい要素に指定する。（tableタグ使用時のtd相当要素）

display:table-cell以外の関連スタイル

display:table-row-group（tbody要素のような表示となる）
display:table-header-group（thead要素のような表示となる）
display:table-row（tr要素のような表示となる）

使用例

<html>
    <head>
        <title>display:table display:table-cellスタイル使用の例</title>
        <style>
            .table {
                display: table;
                border: double;
                border-collapse: collapse;
            }
            .table-row-group {
                display: table-row-group;
            }
            .table-header-group {
                display: table-header-group;
            }
            .table-row {
                display: table-row;
            }
            .table-cell {
                display: table-cell;
                border: double;
            }
        </style>
    </head>
    <body>
        <div class="table">
           <div class="table-row-group">
               <div class="table-row">
                   <div class="table-cell">要素１の内容★★★★★★要素１の内容</div>
                   <div class="table-cell">要素２の内容●●●●●●要素２の内容</div>
                   <div class="table-cell">要素３の内容〇〇〇〇〇〇要素３の内容</div>
               </div>
               <div class="table-row">
                   <div class="table-cell">要素４の内容★★★★★★要素４の内容</div>
                   <div class="table-cell">要素５の内容●●●●●●要素５の内容</div>
                   <div class="table-cell">要素６の内容〇〇〇〇〇〇要素６の内容</div>
                   <div class="table-cell">要素７の内容▲▲▲▲▲▲要素７の内容</div>
               </div>
           </div>
           <div class="table-header-group">
               <div class="table-cell">見出し１</div>
               <div class="table-cell">見出し２</div>
               <div class="table-cell">見出し３</div>
               <div class="table-cell">見出し４</div>
           </div>
        </div>
    </body>
</html>