テーブル

テーブル要素を最適なレイアウトで表示することができます。

このサンプルで使用するオプション

テーブルを指定された列数で段組みする

テーブルの段組みをMFセクションのレイアウトオプション( mf-table-col- ※nは1~3 )で指定します。

プレビュー

スマートフォン上での表示 (変換前)

このプレビューは、横幅480pxの画面を50%に縮小して表示しています。

PREVIEW
パソコン上での表示 (変換後)

このプレビューは、横幅1372pxの画面を50%に縮小して表示しています。

PREVIEW

新しいウィンドウで開く

ソースコード

HTML
<section class="mf-table-col-2">
    <h1>会社情報</h1>
    <table class="">
        <tbody>
            <tr>
                <td>会社名</td>
                <td>株式会社シンメトリック Symmetric Co., Ltd.</td>
            </tr>
            <tr>
                <td>設立年月日</td>
                <td>2001年12月20日</td>
            </tr>
            <tr>
                <td>資本金</td>
                <td>1,000万円</td>
            </tr>
            <tr>
                <td>従業員数</td>
                <td>17名(2017年12月時点)</td>
            </tr>
            <tr>
                <td>取引先銀行</td>
                <td>三菱東京UFJ銀行</td>
            </tr>
            <tr>
                <td>住所</td>
                <td>〒151-0063 東京都渋谷区富ヶ谷2-43-15 山崎ビル5F</td>
            </tr>
        </tbody>
    </table>
</section>
CSS
td {
    padding: 10px;
    border: 2px solid #dadada;
    width: 50%;
}

バリエーション

mf-table-col-3

mf-table-col-2

mf-table-col-1