PatternLab (0.1.259)

# Tables

# Default Table

.c-table

For fixed cell widths add the modifier: .-fixed-layout (you can use width-helpers classes on columns with a fixed table-layout)

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
Jill Smith 50
hide code 
<table class="c-table">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
</table>

# Table With Two Headers

.c-table.-two-headers

Soll-Einwaagee Lastname Age
Soll-Einwaagee Smith 50
Soll-Einwaagee Jackson 94
hide code 
<table class="c-table -two-headers">
    <tr>
        <th>Soll-Einwaagee</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <th>Soll-Einwaagee</th>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <th>Soll-Einwaagee</th>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

# Borderless Table

.c-table.-borderless

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
Jill Smith 50
hide code 
<table class="c-table -borderless">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
</table>

# Table without Stripes

.c-table.-no-stripes

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
Jill Smith 50
hide code 
<table class="c-table -no-stripes">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
</table>

# Small / Condensed Table

.c-table.-condensed or .c-table.-small

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
Jill Smith 50
hide code 
<table class="c-table -condensed">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
</table>

# Extra Small / Condensed Table

.c-table.-extra-small (e.g. in usage for Bestandteile-Table in Plausi).

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
Jill Smith 50
hide code 
<table class="c-table -extra-small">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
</table>

# Horizontally Small Paddings and left intendation

.c-table.-only-x-small: Only x-paddings in columns are small. .c-table.-left-indent: First column is indented.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
hide code 
<table class="c-table -only-x-small -is-fixed -left-indent h-plausi-reset-fs">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

# Vertical Align Middle

.c-table.-vertical-align-middle

# Text-Align Right on Last Column

.c-table.-last-align-right

# Table-Style "Claims"

.c-table.-claims

# Table Badge

.c-table > td > div.c-table__badge

Example:
Premium
Learning
95 €
jährlich, inkl. MwSt.
Premium
Labor+
37,50 €
monatlich *
Premium
MediCheck
95 €
monatlich *
Premium
Complete
119 €
monatlich *
statt 132,50 €
Prüfungstrainer

Fit fürs Examen mit unseren Prüfungstrainern!

  • Kommentare Software auf Keine-Bange.de für das 1. Staatsexamen
  • Karteikartentrainer mit über 1500 Fragen für das 2. Staatsexamen
  • Karteikartentrainer für das 3. Staatsexamen mit über 600 Fragen in den Fächern Recht und Praxis
mehr Informationen
NEU!
apotermin – Coronatest-Software

Mit apotermin managen Sie Ihr Coronatest-Zentrum und vieles mehr:

  • Terminsoftware
  • Digital vom Termin zum Testergebnis beim Kunden
  • Zertifikate mit QR-Code
  • Zentrale Landingpage
  • Anbindung Ihrer Apotheken-Homepage
  • Auch für andere pharmazeutische Dienstleistungen nutzbar
mehr Informationen
hide code 
<table
        class="c-table -no-stripes subscription-type-table h-fullwidth-block"
>
    <thead>
    <tr>
        <th class="cell -head price-column">
            <div class="h-color-secondary"></div>
        </th>
        <th class="cell -head cell-13">
            <div class="c-icon -student -no-circle"></div>
            <div class="h5 h-color-white m-b-reset">Premium</div>
            <div class="type-label">Learning</div>
            <div class="line"></div>
            <div class="type-price">95 €</div>
            <div class="h-type-small">jährlich, inkl. MwSt.</div>
        </th>
        <th class="cell -head cell-8">
            <div class="c-icon -labor -no-circle"></div>
            <div class="h5 h-color-white m-b-reset">Premium</div>
            <div class="type-label">Labor+</div>
            <div class="line"></div>
            <div class="type-price">37,50 €</div>
            <div class="h-type-small">monatlich *</div>
        </th>
        <th class="cell -head cell-15">
            <div class="c-icon -medicheck -no-circle"></div>
            <div class="h5 h-color-white m-b-reset">Premium</div>
            <div class="type-label">MediCheck</div>
            <div class="line"></div>
            <div class="type-price">95 €</div>
            <div class="h-type-small">monatlich *</div>
        </th>
        <th class="cell -head cell-16">
            <div class="c-icon -complete -no-circle"></div>
            <div class="h5 h-color-white m-b-reset">Premium</div>
            <div class="type-label">Complete</div>
            <div class="line"></div>
            <div class="type-price">119 €</div>
            <div class="h-type-small">monatlich *</div>
            <div class="type-old-price h-type-small">statt 132,50 €</div>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="cell -text">
            <div class="c-tooltip__trigger">
              <span class="h-no-wrap">
                Prüfungstrainer
                <a class="c-link"><i class="fa fa-info-circle"></i></a>
              </span>
                <div class="c-tooltip -large">
                    <h4>Fit fürs Examen mit unseren Prüfungstrainern!</h4>
                    <ul class="c-list -unordered">
                        <li>
                            Kommentare Software auf Keine-Bange.de für das
                            1.&nbsp;Staatsexamen
                        </li>
                        <li>
                            Karteikartentrainer mit über 1500 Fragen für das
                            2.&nbsp;Staatsexamen
                        </li>
                        <li>
                            Karteikartentrainer für das 3. Staatsexamen mit über 600
                            Fragen in den Fächern Recht und Praxis
                        </li>
                    </ul>
                    <div class="h-type-align-center">
                        <a
                                class="c-btn -light m-t-m -small -icon-right -icon-arrow"
                                href="/studenten/pruefungstrainer/"
                        >mehr Informationen</a
                        >
                    </div>
                </div>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-13">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-8">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-15">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-16">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
    </tr>
    <tr>
        <td class="cell -text -highlight">
            <div class="c-table__badge">
                <span>NEU!</span>
            </div>
            <div class="c-tooltip__trigger m-l-s">
              <span class="h-no-wrap">
                apotermin
              </span>
                <span class="h-no-wrap">
                – Coronatest-Software
                <a class="c-link"><i class="fa fa-info-circle"></i></a>
              </span>
                <div class="c-tooltip -large">
                    <h4>Mit apotermin managen Sie Ihr Coronatest-Zentrum und vieles mehr:</h4>
                    <ul class="c-list -unordered">
                        <li>Terminsoftware</li>
                        <li>Digital vom Termin zum Testergebnis beim Kunden</li>
                        <li>Zertifikate mit QR-Code</li>
                        <li>Zentrale Landingpage</li>
                        <li>Anbindung Ihrer Apotheken-Homepage</li>
                        <li>Auch für andere pharmazeutische Dienstleistungen nutzbar</li>
                    </ul>
                    <div class="h-type-align-center">
                    <a class="c-btn -light m-t-m -small -icon-right -icon-arrow"
                       href="/apotheker/apotest">mehr Informationen</a>
                    </div>
                </div>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-13 -highlight">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-8 -highlight">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-15 -highlight">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
        <td class="h-color-success">
            <div class="cell cell-16 -highlight">
                <i class="fa fa-check-circle"></i>
            </div>
        </td>
    </tr>
    </tbody>
</table>

# Vue Table

A table without the table-Tag .vue-table > .vue-table__header/__row/__cell

Bestandteile
Menge
Konzentration
Aktionen
1. Schritt:
Stearinsäure 50%
g
3,0000%
Natriumcarbonat-Monohydrat
g
1,0000%
2. Schritt:
Glycerol (wasserfrei)
T
g
73,0000%
Gereinigtes Wasser
ad
g
23,0000%
Gesamtmenge
100,00 g
hide code 
<div class="vue-table m-t-m print-m-y-reset h-plausi-reset-fs">
    <div class="vue-table__header">
    <div class="vue-table__row">
    <div class="vue-table__cell h-width-5"> </div>
    <div class="vue-table__cell h-width-50 p-l-reset">Bestandteile</div>
    <div class="vue-table__cell -second h-width-25 p-r-l">Menge</div>
    <div class="vue-table__cell h-width-15 h-type-align-left ">Konzentration</div>
    <div class="vue-table__cell h-width-10 h-type-align-right hidden-print">Aktionen</div>
    </div>
    </div>
    <div>
    <div class="vue-table__row -draggable ha-divider">
    <div class="h-flex h-flex-row h-vertical-center h-start h-width-100 print-no-bg js-ha-row h-bg-color-secondary p-y-xs print-p-y-reset">
    <div class="vue-table__cell h-width-15 p-l-s"><strong> 1. Schritt: </strong></div>
    <div class="vue-table__cell h-width-85"> </div>
    </div>
    </div>
    <div class="vue-table__row -draggable">
    <div class="h-flex h-flex-row h-vertical-center h-start h-width-100 print-no-bg js-ha-row">
    <div class="vue-table__cell -handler h-width-5 hidden-print"> </div>
    <div class="vue-table__cell h-width-50 p-l-reset js-bestandteil-name">Stearinsäure 50%</div>
    <div class="vue-table__cell h-width-25 p-r-s p-l-reset">
    <div class="inline-menge-wrap vue-wrap"><span class="prefix tooltip js-tooltip" style="display: none;" title="">T</span> <span class="prefix" style="display: none;">ad </span>
    <div class="einheit">g
    <div class="far fa-info-circle c-tooltip__trigger hidden-print" style="display: none;">
    <div class="c-tooltip">undefined g</div>
    </div>
    </div>
    <div class="float-width-wrap"><input class="inline vue-menge-input" readonly="readonly" type="text" data-vv-scope="1" data-vv-name="haMenge" data-vv-validate-on="custom" aria-required="false" aria-invalid="false" /></div>
    </div>
    </div>
    <div class="vue-table__cell concentration-col h-width-15">3,0000%</div>
    <div class="vue-table__cell h-width-10 h-type-align-right">
    <div class="c-action-menu h-flex h-flex-row h-end">
    <div id="ha_row_options" class="c-action-menu__row -last m-y-reset">
    <div class="c-action-menu__dropdown"><button class="c-btn -icon-btn -small -redesign -link" type="button"></button>
    <ul class="c-list -linklist">
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff als Sandwichstoff </a></li>
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff teilen </a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="vue-table__row -draggable">
    <div class="h-flex h-flex-row h-vertical-center h-start h-width-100 print-no-bg js-ha-row">
    <div class="vue-table__cell -handler h-width-5 hidden-print"> </div>
    <div class="vue-table__cell h-width-50 p-l-reset js-bestandteil-name">Natriumcarbonat-Monohydrat</div>
    <div class="vue-table__cell h-width-25 p-r-s p-l-reset">
    <div class="inline-menge-wrap vue-wrap"><span class="prefix tooltip js-tooltip" style="display: none;" title="">T</span> <span class="prefix" style="display: none;">ad </span>
    <div class="einheit">g
    <div class="far fa-info-circle c-tooltip__trigger hidden-print" style="display: none;">
    <div class="c-tooltip">undefined g</div>
    </div>
    </div>
    <div class="float-width-wrap"><input class="inline vue-menge-input" readonly="readonly" type="text" data-vv-scope="2" data-vv-name="haMenge" data-vv-validate-on="custom" aria-required="false" aria-invalid="false" /></div>
    </div>
    </div>
    <div class="vue-table__cell concentration-col h-width-15">1,0000%</div>
    <div class="vue-table__cell h-width-10 h-type-align-right">
    <div class="c-action-menu h-flex h-flex-row h-end">
    <div id="ha_row_options" class="c-action-menu__row -last m-y-reset">
    <div class="c-action-menu__dropdown"><button class="c-btn -icon-btn -small -redesign -link" type="button"></button>
    <ul class="c-list -linklist">
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff als Sandwichstoff </a></li>
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff teilen </a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="vue-table__row -draggable ha-divider">
    <div class="h-flex h-flex-row h-vertical-center h-start h-width-100 print-no-bg js-ha-row h-bg-color-secondary p-y-xs print-p-y-reset">
    <div class="vue-table__cell h-width-15 p-l-s"><strong> 2. Schritt: </strong></div>
    <div class="vue-table__cell h-width-85"> </div>
    </div>
    </div>
    <div class="vue-table__row -draggable">
    <div class="h-flex h-flex-row h-vertical-center h-start h-width-100 print-no-bg js-ha-row">
    <div class="vue-table__cell -handler h-width-5 hidden-print"> </div>
    <div class="vue-table__cell h-width-50 p-l-reset js-bestandteil-name">Glycerol (wasserfrei)</div>
    <div class="vue-table__cell h-width-25 p-r-s p-l-reset">
    <div class="inline-menge-wrap vue-wrap error"><span class="prefix tooltip js-tooltip" title="" data-hasqtip="35">T</span> <span class="prefix" style="display: none;">ad </span>
    <div class="einheit">g
    <div class="far fa-info-circle c-tooltip__trigger hidden-print" style="display: none;">
    <div class="c-tooltip">undefined g</div>
    </div>
    </div>
    <div class="float-width-wrap"><input class="inline vue-menge-input" readonly="readonly" type="text" data-vv-scope="3" data-vv-name="haMenge" data-vv-validate-on="custom" aria-required="false" aria-invalid="false" /></div>
    </div>
    </div>
    <div class="vue-table__cell concentration-col h-width-15">73,0000%</div>
    <div class="vue-table__cell h-width-10 h-type-align-right">
    <div class="c-action-menu h-flex h-flex-row h-end">
    <div id="ha_row_options" class="c-action-menu__row -last m-y-reset">
    <div class="c-action-menu__dropdown"><button class="c-btn -icon-btn -small -redesign -link" type="button"></button>
    <ul class="c-list -linklist">
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff als Sandwichstoff </a></li>
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff teilen </a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="vue-table__row -draggable">
    <div class="h-flex h-flex-row h-vertical-center h-start h-width-100 print-no-bg js-ha-row">
    <div class="vue-table__cell -handler h-width-5 hidden-print"> </div>
    <div class="vue-table__cell h-width-50 p-l-reset js-bestandteil-name">Gereinigtes Wasser</div>
    <div class="vue-table__cell h-width-25 p-r-s p-l-reset">
    <div class="inline-menge-wrap vue-wrap"><span class="prefix tooltip js-tooltip" style="display: none;" title="" data-hasqtip="36">T</span> <span class="prefix">ad </span>
    <div class="einheit">g
    <div class="far fa-info-circle c-tooltip__trigger hidden-print" style="display: none;">
    <div class="c-tooltip">undefined g</div>
    </div>
    </div>
    <div class="float-width-wrap"><input class="inline vue-menge-input" readonly="readonly" type="text" data-vv-scope="4" data-vv-name="haMenge" data-vv-validate-on="custom" aria-required="false" aria-invalid="false" /></div>
    </div>
    </div>
    <div class="vue-table__cell concentration-col h-width-15">23,0000%</div>
    <div class="vue-table__cell h-width-10 h-type-align-right">
    <div class="c-action-menu h-flex h-flex-row h-end">
    <div id="ha_row_options" class="c-action-menu__row -last m-y-reset">
    <div class="c-action-menu__dropdown"><button class="c-btn -icon-btn -small -redesign -link" type="button"></button>
    <ul class="c-list -linklist">
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff als Sandwichstoff </a></li>
    <li class="c-list__item"><a class="c-link -icon-left -redesign"> Stoff teilen </a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="vue-table__footer">
    <div class="vue-table__row p-l-m">
    <div class="vue-table__cell h-width-50"> </div>
    <div class="vue-table__cell h-width-25">
    <div class="h-type-bold">Gesamtmenge</div>
    </div>
    <div class="vue-table__cell h-width-auto">100,00 g</div>
    <div class="vue-table__cell"> </div>
    </div>
    </div>
</div>
<div class="h-highlight-block -bottom m-b-s p-y-xs">
<div class="h-flex h-flex-row h-vertical-center">
<div class="c-checkbox -small"><input id="checkbox1" type="checkbox" /> <label class="c-label -old print-m-r-m" for="checkbox1">Mehrere Herstellungsschritte</label></div>
<div id="num-dividers" class="h-flex h-vertical-center h-start"><input class="c-input -old -white -number h-type-align-center" readonly="readonly" type="text" />
<div class="h-flex h-flex-row hidden-print m-l-xs"> </div>
</div>
</div>
<div class="h-flex h-flex-row h-vertical-center">
<div class="c-checkbox -small m-r-xs"><input id="checkbox2" name="checkbox2" type="checkbox" /> <label class="c-label -old" for="checkbox2">Sandwicheinwaage</label></div>
</div>
</div>

← Teaser →