スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

シンプル軽量のCSSフレームワーク「Pure」:テーブルの書式



シンプル軽量のCSSフレームワーク「Pure」:テーブルの書式

Pure」のコードを少しずつまとめていきます。
今回はテーブルの書式です。

~ 目次 ~

  1. 基本的なテーブルの書式
  2. セルに枠線を入れる
  3. 行に横線のみを入れる<
  4. 表を縞模様にする
  5. 任意の行のみ背景色を入れる

基本的なテーブルの書式

表に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>

ブラウザでの表示