シンプル軽量のCSSフレームワーク「Pure」：テーブルの書式
「Pure」のコードを少しずつまとめていきます。
今回はテーブルの書式です。
～ 目次 ～
- 基本的なテーブルの書式
- セルに枠線を入れる
- 行に横線のみを入れる<
- 表を縞模様にする
- 任意の行のみ背景色を入れる
基本的なテーブルの書式
表にclass「pure-table」を適用します。
HTML
<table class="pure-table"> <thead> <tr> <th>#</th> <th>都道府県</th> <th>生産量(t)</th> <th>割合(%)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>青森</td> <td>468,000</td> <td>57.3</td> </tr> <tr> <td>2</td> <td>長野</td> <td>162,900</td> <td>20.0</td> </tr> <tr> <td>3</td> <td>山形</td> <td>52,400</td> <td>6.4</td> </tr> </tbody> </table>
ブラウザでの表示
セルに枠線を入れる
表にclass「pure-table-bordered」を適用します。
HTML
<table class="pure-table pure-table-bordered"> <thead> <tr> <th>#</th> <th>都道府県</th> <th>生産量(t)</th> <th>割合(%)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>青森</td> <td>468,000</td> <td>57.3</td> </tr> <tr> <td>2</td> <td>長野</td> <td>162,900</td> <td>20.0</td> </tr> <tr> <td>3</td> <td>山形</td> <td>52,400</td> <td>6.4</td> </tr> </tbody> </table>
ブラウザでの表示
行に横線のみを入れる
表にclass「pure-table-horizontal」を適用します。
HTML
<table class="pure-table pure-table-horizontal"> <thead> <tr> <th>#</th> <th>都道府県</th> <th>生産量(t)</th> <th>割合(%)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>青森</td> <td>468,000</td> <td>57.3</td> </tr> <tr> <td>2</td> <td>長野</td> <td>162,900</td> <td>20.0</td> </tr> <tr> <td>3</td> <td>山形</td> <td>52,400</td> <td>6.4</td> </tr> </tbody> </table>
ブラウザでの表示
表を縞模様にする
表にclass「pure-table-striped」を適用します。
tbody以下の奇数行のtrに薄暗い背景色が入ります。
HTML
<table class="pure-table pure-table-bordered pure-table-striped"> <thead> <tr> <th>#</th> <th>都道府県</th> <th>生産量(t)</th> <th>割合(%)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>青森</td> <td>468,000</td> <td>57.3</td> </tr> <tr> <td>2</td> <td>長野</td> <td>162,900</td> <td>20.0</td> </tr> <tr> <td>3</td> <td>山形</td> <td>52,400</td> <td>6.4</td> </tr> <tr> <td>4</td> <td>岩手</td> <td>46,500</td> <td>5.7</td> </tr> <tr> <td>5</td> <td>福島</td> <td>27,600</td> <td>3.4</td> </tr> </tbody> </table>
ブラウザでの表示
任意の行のみ背景色を入れる
任意のtrにclass「pure-table-odd」を適用します。
HTML
<table class="pure-table pure-table-bordered"> <thead> <tr> <th>#</th> <th>都道府県</th> <th>生産量(t)</th> <th>割合(%)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>青森</td> <td>468,000</td> <td>57.3</td> </tr> <tr> <td>2</td> <td>長野</td> <td>162,900</td> <td>20.0</td> </tr> <tr> <td>3</td> <td>山形</td> <td>52,400</td> <td>6.4</td> </tr> <tr class="pure-table-odd"> <td>4</td> <td>岩手</td> <td>46,500</td> <td>5.7</td> </tr> <tr> <td>5</td> <td>福島</td> <td>27,600</td> <td>3.4</td> </tr> </tbody> </table>
ブラウザでの表示
