UIkitのカスタマイズ　罫線のある表のスタイルを追加する

またまたUIkitネタです。
今回は罫線のあるテーブル（表）のスタイルを追加したいと思います。

今回は新しいスタイルを追加するのですが、今回紹介する手順がベストプラクティスなのかあまり自信がありませんが、 一応table要素にuk-table-borderdを指定することによって罫線のある表になりました。

パラメータの指定

罫線の色と太さ、および表のヘッダーの背景色を次のように指定しました。

/custom/tbn/table.less

// append borderd color, width

@table-borderd-color:                           @global-border;

@table-borderd-width:                           1px;

@table-header-background:                       #eee;

続いて同じファイルに、以下のようにスタイルを定義しました。

// append modifier `uk-table-borderd`

/* Modifier: `uk-table-borderd`
========================================================================== */



.uk-table-borderd {

    border: @table-borderd-width solid @table-borderd-color;

    .hook-table-borderd;

}



.uk-table-borderd thead {

    border: @table-borderd-width solid @table-borderd-color;

    background-color: @table-header-background;

}



.uk-table-borderd tr:first-child th, .uk-table-borderd tr:first-child td {

  border-top: none;

}



.uk-table-borderd th, .uk-table-borderd td {

    border-right: @table-borderd-width solid @table-borderd-color;

    border-top: @table-borderd-width solid @table-borderd-color;

}



.uk-table-borderd th:last-child, .uk-table-borderd td:last-child {

    border-left: none;

}

tr要素に対してborderが設定できれば水平線は簡単に指定ができそうでしたが、trにはborderが設定できないようです。
なので、td, thの要素にborderの指定を行います。

w3cのドキュメントでは全ての要素が対象と書かれているように読み取れますが・・・ tr要素だけは例外なのでしょうか・・・

全てのブラウザを試していませんが、OS XのSafariで一部期待した通りの罫線が表示されないことがありましたが、 幸いthead要素にはborderを指定することができ、WindowsのIE11, Chrome, OS XのSafari, Chromeでは 問題なさそうです。

一応、カスタマイズということで、カスタマイズ用のlessファイルを修正しましたが、単にスタイルを追加しただけなので、 必要となるWebサイトごとに個別に指定しても良いような気がしてきました・・・

仕上がり具合を確認する

UIkitが提供しているCustomizerのページで確認してみます。

スタイルを追加しましたのでそのスタイルを適用するための表を/docs/table.htmlに追加します。
今回確認のために次のHTMLを追記しました。

<pre><code>&lt;table class="uk-table uk-table-borderd"&gt;...&lt;/table&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>Table borderd</h3>

                            <p>Add zebra-striping to a table by adding the <code>.uk-table-borderd</code> class.</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-borderd">
                                    <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>
                            </div>

tableタグのclassにuk-table-borderdを指定しています。
続いて、コンソールから次のコマンドを実行してビルドとブラウザの起動を行います。
THEME-NAMEはテーマの名前に置き換えてください。

$ gulp dist -t <THEME-NAME>
$ gulp sync

下図のような罫線のある表を指定することができました。

uk-table-borderd

このブログのシリーズで試したスタイルはGitHubでも公開しています。

関連記事