Phoenix Reisen Styleguide

900 #permalink Tabellen

Toggle example guides Toggle HTML markup

Examples
Default styling
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--horizontal-bordered
A horizontal bordered table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--vertical-bordered
A vertical bordered table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--horizontal-striped
A horizontal striped table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--vertical-striped
A vertical striped table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
Markup 
<table class="[modifier class]">
    <thead>
        <tr>
            <th>Column Name</th>
            <th>Column Name</th>
            <th>Column Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
        <tr>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
        <tr>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
    </tbody>
</table>
Source: src/components/_table.scss, line 1