module-table

m-table

表組を整形する。このクラス単独では整列のみ行う。
幅は常に100%、セル内の文字は常に左寄せとなる。寄せ方向を変更したい場合は utility > .u-line-(direction) を使用する。

キャプション
吾輩は猫である 名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫 である名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<table class="m-table">
    <caption>キャプション</caption>
    <tbody>
        <tr>
            <th>吾輩は猫である</th>
            <td>名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
        </tr>
        <tr>
            <th>吾輩は猫である名前はまだ無い。</th>
            <td>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
        </tr>
        <tr>
            <th>吾輩は猫</th>
            <td>である名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
        </tr>
    </tbody>
</table>

m-table-bordered

表組のセル全てにグリッド罫線を引く。

吾輩は 猫である 名前はまだ無い
吾輩は猫である 名前はまだ無い どこで生れたかとんと見当がつかぬ
何でも薄暗い じめじめした所でニャーニャー 泣いていた事だけは記憶している
吾輩はここで始めて 人間というものを見た しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
どこで生れたか とんと 見当がつかぬ
<table class="m-table m-table-bordered">
    <thead>
        <tr>
            <th>吾輩は</th>
            <th>猫である</th>
            <th>名前はまだ無い</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>吾輩は猫である</th>
            <td>名前はまだ無い</td>
            <td>どこで生れたかとんと見当がつかぬ</td>
        </tr>
        <tr>
            <th>何でも薄暗い</th>
            <td>じめじめした所でニャーニャー</td>
            <td>泣いていた事だけは記憶している</td>
        </tr>
        <tr>
            <th>吾輩はここで始めて</th>
            <td>人間というものを見た</td>
            <td>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>どこで生れたか</th>
            <td>とんと</td>
            <td>見当がつかぬ</td>
        </tr>
    </tfoot>
</table>

m-table-ruled

表組の各セルの下のみ罫線を引く。Bootstrapの .table と同じ。

吾輩は 猫である 名前はまだ無い
吾輩は猫である 名前はまだ無い どこで生れたかとんと見当がつかぬ
何でも薄暗い じめじめした所でニャーニャー 泣いていた事だけは記憶している
吾輩はここで始めて 人間というものを見た しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
どこで生れたか とんと 見当がつかぬ
<table class="m-table m-table-ruled">
    <thead>
        <tr>
            <th>吾輩は</th>
            <th>猫である</th>
            <th>名前はまだ無い</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>吾輩は猫である</th>
            <td>名前はまだ無い</td>
            <td>どこで生れたかとんと見当がつかぬ</td>
        </tr>
        <tr>
            <th>何でも薄暗い</th>
            <td>じめじめした所でニャーニャー</td>
            <td>泣いていた事だけは記憶している</td>
        </tr>
        <tr>
            <th>吾輩はここで始めて</th>
            <td>人間というものを見た</td>
            <td>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>どこで生れたか</th>
            <td>とんと</td>
            <td>見当がつかぬ</td>
        </tr>
    </tfoot>
</table>

m-table-justify

列数、内容にかかわらず、セルを均等な幅にする。

吾輩は猫である名前はまだ無い。どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前は まだ無い。どこで生れたか とんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。
吾輩は猫である 名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で
<div style="margin-bottom: 2rem;">
    <table class="m-table m-table-bordered m-table-justify">
        <tbody>
            <tr>
                <td>吾輩は猫である名前はまだ無い。どこで生れたかとんと見当がつかぬ。</td>
                <td>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
        </tbody>
    </table>
</div>

<div style="margin-bottom: 2rem;">
    <table class="m-table m-table-bordered m-table-justify">
        <tbody>
            <tr>
                <td>吾輩は猫である名前は</td>
                <td>まだ無い。どこで生れたか</td>
                <td>とんと見当がつかぬ。</td>
                <td>何でも薄暗いじめじめした所で</td>
                <td rowspan="2">ニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
            <tr>
                <td>吾輩は猫である</td>
                <td>名前はまだ無い。</td>
                <td colspan="2">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で</td>
            </tr>
        </tbody>
    </table>
</div>

m-table-(ratio-first)to(ratio-second)to(ratio-third)

2列または3列のセル幅を、 (ratio) / 12 の比率にする。
(ratio-first)to(ratio-second)to(ratio-third)は 3to9, 4to8, 3to3to6, 0to12 に対応している。

.m-table-3to9
吾輩は猫である 名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
.m-table-4to8
吾輩は猫である 名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
.m-table-3to3to6
吾輩は猫である 名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
.m-table-0to12
吾輩は猫 である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで 始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかし その当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
<div style="margin-bottom: 2rem;">
    <table class="m-table m-table-bordered m-table-3to9">
        <caption>.m-table-3to9</caption>
        <tbody>
            <tr>
                <th>吾輩は猫である</th>
                <td>名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
            <tr>
                <th>吾輩は猫である名前はまだ無い。</th>
                <td>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
        </tbody>
    </table>
</div>

<div style="margin-bottom: 2rem;">
    <table class="m-table m-table-bordered m-table-4to8">
        <caption>.m-table-4to8</caption>
        <tbody>
            <tr>
                <th>吾輩は猫である</th>
                <td>名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
            <tr>
                <th>吾輩は猫である名前はまだ無い。</th>
                <td>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
        </tbody>
    </table>
</div>

<div style="margin-bottom: 2rem;">
    <table class="m-table m-table-bordered m-table-3to3to6">
        <caption>.m-table-3to3to6</caption>
        <tbody>
            <tr>
                <th>吾輩は猫である</th>
                <td>名前はまだ無い。</td>
                <td>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
            <tr>
                <th>吾輩は猫である名前はまだ無い。</th>
                <td>どこで生れたかとんと見当がつかぬ。</td>
                <td>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
        </tbody>
    </table>
</div>

<div>
    <table class="m-table m-table-bordered m-table-0to12">
        <caption>.m-table-0to12</caption>
        <tbody>
            <tr>
                <th>吾輩は猫</th>
                <td>である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
            </tr>
            <tr>
                <th>吾輩はここで</th>
                <td>始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</td>
            </tr>
            <tr>
                <th>しかし</th>
                <td>その当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</td>
            </tr>
        </tbody>
    </table>
</div>

m-table-break-sm-down

(breakpoint)が sm 以下のときに表組を解除する。
2カラム以上の表の場合は .m-table-responsive を推薦。

吾輩は猫である 名前はまだ無い
吾輩は猫である名前はまだ無い どこで生れたかとんと見当がつかぬ
何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している
吾輩はここで始めて人間というものを見た しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
どこで生れたか とんと見当がつかぬ
吾輩は猫である 名前はまだ無い
吾輩は猫である名前はまだ無い どこで生れたかとんと見当がつかぬ
何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している
吾輩はここで始めて人間というものを見た しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
どこで生れたか とんと見当がつかぬ
<table class="m-table m-table-break-sm-down m-table-bordered" style="margin-bottom: 2rem;">
    <thead>
        <tr>
            <th>吾輩は猫である</th>
            <th>名前はまだ無い</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>吾輩は猫である名前はまだ無い</th>
            <td>どこで生れたかとんと見当がつかぬ</td>
        </tr>
        <tr>
            <th>何でも薄暗いじめじめした所で</th>
            <td>ニャーニャー泣いていた事だけは記憶している</td>
        </tr>
        <tr>
            <th>吾輩はここで始めて人間というものを見た</th>
            <td>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>どこで生れたか</th>
            <td>とんと見当がつかぬ</td>
        </tr>
    </tfoot>
</table>

<table class="m-table m-table-break-sm-down m-table-ruled">
    <thead>
        <tr>
            <th>吾輩は猫である</th>
            <th>名前はまだ無い</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>吾輩は猫である名前はまだ無い</th>
            <td>どこで生れたかとんと見当がつかぬ</td>
        </tr>
        <tr>
            <th>何でも薄暗いじめじめした所で</th>
            <td>ニャーニャー泣いていた事だけは記憶している</td>
        </tr>
        <tr>
            <th>吾輩はここで始めて人間というものを見た</th>
            <td>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>どこで生れたか</th>
            <td>とんと見当がつかぬ</td>
        </tr>
    </tfoot>
</table>

m-table-responsive

(breakpoint)が md 以下のときにスクロールバーを表示する。

吾輩は猫である 名前はまだ無い どこで生れたかとんと見当がつかぬ
何でも薄暗い じめじめした所でニャーニャー 泣いていた事だけは記憶している
<div class="m-table-responsive">
    <table class="m-table m-table-bordered">
        <tbody>
            <tr>
                <th>吾輩は猫である</th>
                <td>名前はまだ無い</td>
                <td>どこで生れたかとんと見当がつかぬ</td>
            </tr>
            <tr>
                <th>何でも薄暗い</th>
                <td>じめじめした所でニャーニャー</td>
                <td>泣いていた事だけは記憶している</td>
            </tr>
        </tbody>
    </table>
</div>