module-table

table

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

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

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

2列または3列の表を (ratio) / 12 の比率で表示する。
(ratio-first)to(ratio-second)to(ratio-third)は 3to9, 4to8, 3to3to6 に対応している。

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

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

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

table-justify

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

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

<table class="table table-01 table-justify m-b">
    <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>

table-01

表組のタイプ1。

補足：表組の命名

サイトによりデザインが大きく異なるため、.table-bordered, .table-striped などの見た目をそのまま表すクラスは使用していない。

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

table-02

表組のタイプ2。

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