本文へスキップ

ドキュメント

表

様々なスタイルで、見栄えの良い表を簡単に作成できます。

使用方法

このコンポーネントを適用するには、<table>要素に.uk-tableクラスを追加します。

<table class="uk-table">
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>
  • 表のキャプション
    表の見出し 表の見出し 表の見出し
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ
    表のフッター 表のフッター 表のフッター 
  • <table class="uk-table">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

区切り線修飾子

表の行間に区切り線を表示するには、.uk-table-dividerクラスを追加します。

<table class="uk-table uk-table-divider">…</table>
  • 表の見出し 表の見出し 表の見出し
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 
  • <table class="uk-table uk-table-divider">
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

縞模様修飾子

.uk-table-stripedクラスを追加して、表にゼブラストライプを追加します。

<table class="uk-table uk-table-striped">…</table>
  • 表の見出し 表の見出し 表の見出し
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 
  • <table class="uk-table uk-table-striped">
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

ホバー修飾子

.uk-table-hoverクラスを追加して、表の行にホバー状態を表示します。

<table class="uk-table uk-table-hover">…</table>
  • 表の見出し 表の見出し 表の見出し
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 
  • <table class="uk-table uk-table-hover uk-table-divider">
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

サイズ修飾子

表を小さくまたは大きくするには、.uk-table-smallまたは.uk-table-largeクラスを表に追加します。

<table class="uk-table uk-table-small">…</table>
  • 表の見出し 表の見出し 表の見出し
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 
  • <table class="uk-table uk-table-small uk-table-divider">
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

調整修飾子

表の最初の列と最後の列の外側の余白を削除して、表とぴったり合わせるには、.uk-table-justifyクラスを追加します。

<table class="uk-table uk-table-justify">…</table>
  • 表の見出し 表の見出し 表の見出し
    表のデータ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    表のデータ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  • <table class="uk-table uk-table-justify uk-table-divider">
    <thead>
        <tr>
            <th class="uk-width-small">Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button class="uk-button uk-button-default" type="button">Button</button></td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button class="uk-button uk-button-default" type="button">Button</button></td>
        </tr>
    </tbody>
</table>

配置修飾子

表の内容を垂直方向に中央揃えにするには、.uk-table-middleクラスを追加するだけです。より具体的な選択のために、<tr>または<td>要素にもクラスを適用できます。

<table class="uk-table uk-table-middle">…</table>
  • 表の見出し 表の見出し 表の見出し
    表のデータ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    表のデータ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  • <table class="uk-table uk-table-middle uk-table-divider">
    <thead>
        <tr>
            <th class="uk-width-small">Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button class="uk-button uk-button-default" type="button">Button</button></td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button class="uk-button uk-button-default" type="button">Button</button></td>
        </tr>
    </tbody>
</table>

レスポンシブテーブル

表がコンテナ要素よりも幅広いか、特定のビューポート幅で大きくなりすぎる場合は、<div>要素でラップし、ユーティリティコンポーネントから.uk-overflow-autoクラスを追加します。これにより、内部の要素がコンテナ自体よりも幅広くなった場合に、水平スクロールバーを提供するコンテナが作成されます。

<div class="uk-overflow-auto">
    <table class="uk-table">…</table>
</div>
  • 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し 表の見出し
    表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 表のデータ 
  • <div class="uk-overflow-auto">
    <table class="uk-table uk-table-small uk-table-divider">
        <thead>
            <tr>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
    </table>
</div>

小さなビューポートでスタック

小さな画面で表の列をスタックさせるには、.uk-table-responsiveクラスを追加します。

<table class="uk-table uk-table-responsive">…</table>
  • 表の見出し 表の見出し 表の見出し
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 
  • <table class="uk-table uk-table-responsive uk-table-divider">
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

注記 ブラウザウィンドウのサイズを変更して、列がスタックされる様子を確認してください。

列幅修飾子

列幅またはコンテンツを変更するには、次のクラスのいずれかを使用できます。このクラスは列セルのいずれかに追加するだけで済みます。ヘッダーセルへの追加をお勧めします。

クラス 説明
.uk-table-shrink 列幅をコンテンツに合わせて縮小するには、<th>または<td>要素にこのクラスを追加します。
.uk-table-expand 残りのスペースを埋める列幅を拡張し、最小幅を適用するには、<th>または<td>要素にこのクラスを追加します。
.uk-width-* 列幅を変更するには、幅コンポーネントからこれらのクラスのいずれかを<th>または<td>要素に追加します。 
<th class="uk-table-shrink"></th>
  • 縮小 拡張 幅 小
    表のデータ 表のデータ 表のデータ
    表のデータ 表のデータ 表のデータ 
  • <table class="uk-table uk-table-divider">
    <thead>
        <tr>
            <th class="uk-table-shrink">Shrink</th>
            <th class="uk-table-expand">Expand</th>
            <th class="uk-width-small">Width Small</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

ユーティリティ

表のセルとその特定のコンテンツの表示を最適化するには、次のクラスのいずれかを追加できます。

クラス 説明
.uk-table-link セル全体をリンクするには、<th>または<td>要素にこのクラスを追加し、<a>要素を挿入します。デフォルトのリンクスタイルをリセットするには、リンクコンポーネントから.uk-link-resetクラスを追加します。
.uk-preserve-width UIkitでは画像がデフォルトでレスポンシブであるため、.uk-table-shrinkクラスを使用して表セル内で画像を使用すると、画像の幅が0に縮小されます。この動作を防ぐには、ベースコンポーネントから.uk-preserve-widthクラスを<img>要素に追加します。
.uk-text-truncate 表セルに固定幅を適用する場合、テキストコンポーネントからこのクラスを<td>要素に追加してテキストを切り捨てることができます。
.uk-text-nowrap 例えば.uk-table-shrinkクラスを使用する場合など、テキストの折り返しを防ぐには、テキストコンポーネントからこのクラスを追加します。 
<!-- Table link -->
<td class="uk-table-link">
    <a class="uk-link-reset" href=""></a>
</td>

<!-- Preserve width -->
<td>
    <img class="uk-preserve-width" src="" width="" height="" alt="">
</td>

<!-- Text truncate -->
<td class="uk-text-truncate"></td>

<!-- Text nowrap -->
<td class="uk-text-nowrap"></td>
  • 保持 拡張 + リンク 切り捨て 縮小 + 折り返しなし
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor 
  • <div class="uk-overflow-auto">
    <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
        <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink">Preserve</th>
                <th class="uk-table-expand">Expand + Link</th>
                <th class="uk-width-small">Truncate</th>
                <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
        </tbody>
    </table>
</div>