Phoenix Reisen Styleguide

900 #permalink Tabellen

Toggle full screen Open in new window 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

900.1 #permalink Zeilen

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Zeilenspezifische Styles

Examples
Default styling
Column Name Column Name
Column Content Column Content
.table__row--success
A row that visualizes an success (status)
Column Name Column Name
Column Content Column Content
.table__row--info
A row that visualizes a info
Column Name Column Name
Column Content Column Content
.table__row--warning
A row that visualizes a warning
Column Name Column Name
Column Content Column Content
.table__row--error
A row that visualizes an error (status)
Column Name Column Name
Column Content Column Content
Markup 
<table>
    <thead>
        <tr>
            <th>Column Name</th>
            <th>Column Name</th>
        </tr>
    </thead>
    <tbody>
        <tr class="[modifier class]">
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
    </tbody>
</table>
Source: src/components/_table.scss, line 77

900.2 #permalink Spalten

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Spaltenspezifische Styles

Examples
Default styling
Column Name Column Name
Column Content Column Content
.table__cell--success
A cell that visualizes an success (status)
Column Name Column Name
Column Content Column Content
.table__cell--info
A cell that visualizes a info
Column Name Column Name
Column Content Column Content
.table__cell--error
A cell that visualizes an error
Column Name Column Name
Column Content Column Content
.table__cell--warning
A cell that visualizes a warning
Column Name Column Name
Column Content Column Content
Markup 
<table>
    <thead>
        <tr>
            <th>Column Name</th>
            <th>Column Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="[modifier class]">Column Content</td>
            <td>Column Content</td>
        </tr>
    </tbody>
</table>
Source: src/components/_table.scss, line 151