Pistachio the front end framework and pattern library for graze.com

contents:


    tables

    Tables should be used for tabular content such as lists of ingredients.

    You can use the bootstrap column classes such as col-xxs-4 to define percentage sizes for your table columns although these will not collapse at lower breakpoints like the grid usually does.

    notes

    The below example uses the .horizontal-overflow div to contain the table with a .horizontal-overflow__table class applied to the table. This ensures that overflowing tables are scrollable and not distorted for users with smaller screens. When applicable, always use this container to ensure optimal display of tables.

    basic table

    A basic, minimal, table.

      per 100g per punnet (18g)
    Energy 2100 kJ
    501 kcal
    378 kJ
    90 kcal
    Fat
    of which saturates
    24 g
    7.6 g
    4.4 g
    1.4 g
    Carbohydrate
    of which sugars
    61 g
    5.8 g
    11 g
    1.1 g
    * no added salt – purely from naturally occurring sodium
    <div class="horizontal-overflow">
        <table class="table">
            <thead>
                <tr>
                    <th class="col-xxs-4">&nbsp;</th>
                    <th class="col-xxs-4">per 100g</th>
                    <th class="col-xxs-4">per punnet (18g)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Energy</td>
                    <td>2100 kJ<br>501 kcal</td>
                    <td>378 kJ<br>90 kcal</td>
                </tr>
                <tr>
                    <td>Fat<br><small>of which saturates</small></td>
                    <td>24 g<br><small>7.6 g</small></td>
                    <td>4.4 g<br><small>1.4 g</small></td>
                </tr>
                <tr>
                    <td>Carbohydrate<br><small>of which sugars</small></td>
                    <td>61 g<br><small>5.8 g</small></td>
                    <td>11 g<br><small>1.1 g</small></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">* no added salt – purely from naturally occurring sodium</td>
                </tr>
            </tfoot>
        </table>
    </div>

    centered table

    For cells that are vertically centered.

    item price
    Some food
    (400g)
    £6.99 remove
    Fashionable clothing
    £65.99 remove
    <div class="horizontal-overflow">
        <table class="table table--centered horizontal-overflow__table">
            <thead>
                <tr>
                    <th class="col-xxs-2">item</th>
                    <th class="col-xxs-6"></th>
                    <th class="col-xxs-2">price</th>
                    <th class="col-xxs-2"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <img class="img-responsive" src="/images/feature/square-ppnuts.jpg">
                    </td>
                    <td>Some food<br><small>(400g)</small></td>
                    <td>£6.99</td>
                    <td><a href="#" class="link-meta link-nowrap"><i class="fa fa-close"></i> remove</a></td>
                </tr>
                <tr>
                    <td>
                        <img class="img-responsive" src="/images/feature/square-blackboard.jpg">
                    </td>
                    <td>Fashionable clothing<br></td>
                    <td>£65.99</td>
                    <td><a href="#" class="link-meta link-nowrap"><i class="fa fa-close"></i> remove</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    striped table

    For added clarity.

      per 100g per punnet (18g)
    Energy 2100 kJ 378 kJ
    Fats 24 g 4.4 g
    Carbohydrates 61 g 11 g
    no added salt – purely from naturally occurring sodium
    <div class="horizontal-overflow">
        <table class="table table--striped horizontal-overflow__table">
            <thead>
                <tr>
                    <th class="col-xxs-4">&nbsp;</th>
                    <th class="col-xxs-4">per 100g</th>
                    <th class="col-xxs-4">per punnet (18g)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Energy</td>
                    <td>2100 kJ</td>
                    <td>378 kJ</td>
                </tr>
                <tr>
                    <td>Fats</td>
                    <td>24 g</td>
                    <td>4.4 g</td>
                </tr>
                <tr>
                    <td>Carbohydrates</td>
                    <td>61 g</td>
                    <td>11 g</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">no added salt – purely from naturally occurring sodium</td>
                </tr>
            </tfoot>
        </table>
    </div>

    hover table

    For interaction.

      per 100g per punnet (18g)
    Energy
    Fat
    <div class="horizontal-overflow">
        <table class="table table--striped table--centered table--hover horizontal-overflow__table">
            <thead>
                <tr>
                    <th class="col-xxs-4">&nbsp;</th>
                    <th class="col-xxs-4">per 100g</th>
                    <th class="col-xxs-4">per punnet (18g)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Energy</td>
                    <td>
                        <div class="form-group form-group--bleed form-group--has-feedback">
                            <input type="number" name="kcal" class="form-control" value="2100"></input><span class="form-control-feedback">kcal</span>
                        </div>
                    </td>
                    <td>
                        <div class="form-group form-group--bleed form-group--has-feedback">
                            <input type="number" name="kj" class="form-control" value="378"></input><span class="form-control-feedback">kJ</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Fat</td>
                    <td>
                        <div class="form-group form-group--bleed form-group--has-feedback">
                            <input type="number" name="g" class="form-control" value="24"></input><span class="form-control-feedback">g</span>
                        </div>
                    </td>
                    <td>
                        <div class="form-group form-group--bleed form-group--has-feedback">
                            <input type="number" name="g" class="form-control" value="4.4"></input><span class="form-control-feedback">g</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>