Table
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 |
Show Code
html
<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>Modifier Classes
Table With Two Headers
.c-table.-two-headers
| Soll-Einwaagee | Lastname | Age |
|---|---|---|
| Soll-Einwaagee | Smith | 50 |
| Soll-Einwaagee | Jackson | 94 |
Show Code
html
<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 |
Show Code
html
<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 |
Show Code
html
<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 Table
.c-table.-small
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Jill | Smith | 50 |
Show Code
html
<table class="c-table -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>Extra Small 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 |
Show Code
html
<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 |
Show Code
html
<table class="c-table -only-x-small -left-indent">
<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
The content of table headers and columns are vertically aligned in the middle.
.c-table.-vertical-align-middle
| Lorem ipsum dolor sit amet sed diam voluptua | Lastname | Age |
|---|---|---|
| Lorem ipsum dolor sit amet ut labore et dolore magna aliquyam erat, sed diam voluptua. | Jackson | 94 |
Show Code
html
<table class="c-table -vertical-align-middle">
<tr>
<th class="h-width-25">Lorem ipsum dolor sit amet sed diam voluptua</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet ut labore et dolore magna aliquyam erat, sed diam voluptua. </td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Vertical Align Top
.c-table.-vertical-align-top
| Lorem ipsum dolor sit amet sed diam voluptua | Lastname | Age |
|---|---|---|
| Lorem ipsum dolor sit amet ut labore et dolore magna aliquyam erat, sed diam voluptua. | Jackson | 94 |
Show Code
html
<table class="c-table -vertical-align-top">
<tr>
<th class="h-width-25">Lorem ipsum dolor sit amet sed diam voluptua</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet ut labore et dolore magna aliquyam erat, sed diam voluptua. </td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Text-Align Right on Last Column
.c-table.-last-align-right
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
Show Code
html
<table class="c-table -last-align-right">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>Table Badge
.c-table > td > div.c-table__badge
NEU! apotermin |
Show Code
html
<table
class="c-table -no-stripes subscription-type-table"
>
<tbody>
<tr>
<td class="cell -text -highlight">
<div class="c-table__badge">
<span>NEU!</span>
</div>
<div>
<span class="h-no-wrap">
apotermin
</span>
</div>
</td>
<td class="h-color-success">
<div class="cell cell-13 -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
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%
Show Code
html
<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 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="c-input-wrap vue-wrap"><span class="c-input-wrap__prefix tooltip js-tooltip" style="display: none;" title="">T</span>
<div class="c-input-wrap__unit">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="c-input-wrap__input"><input class="c-input -old 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="c-input-wrap vue-wrap"><span class="c-input-wrap__prefix tooltip js-tooltip" style="display: none;" title="">T</span> <span class="c-input-wrap__prefix" style="display: none;">ad </span>
<div class="c-input-wrap__unit">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="c-input-wrap__input"><input class="c-input -old 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 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="c-input-wrap vue-wrap error"><span class="c-input-wrap__prefix tooltip js-tooltip" title="" data-hasqtip="35">T</span> <span class="c-input-wrap__prefix" style="display: none;">ad </span>
<div class="c-input-wrap__unit">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="c-input-wrap__input"><input class="c-input -old 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="c-input-wrap vue-wrap"><span class="c-input-wrap__prefix tooltip js-tooltip" style="display: none;" title="" data-hasqtip="36">T</span> <span class="c-input-wrap__prefix">ad </span>
<div class="c-input-wrap__unit">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="c-input-wrap__input"><input class="c-input -old 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>