<table class="table" cellspacing="0" cellpadding="0">
<tbody class="table__wrapper">
<tr class="table__row table__row--header">
<th data-target="title" class="table__head table__head--primary table__head--title">
<div class="table__head__wrapper">
Titel
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
<th data-target="type" class="table__head table__head--primary table__head--type">
<div class="table__head__wrapper">
Typ
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
<th data-target="language" class="table__head table__head--primary table__head--language">
<div class="table__head__wrapper">
Sprache
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
<th data-target="mime" class="table__head table__head--primary table__head--mime">
<div class="table__head__wrapper">
Dateityp
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">2-Stufen-Drehschalter, Typ 30049</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">2-Stufen-Drehschalter, Typ 30051</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">2-Stufen-Drehstromsteuerung, Typ 30277</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Spanisch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">350 Anleitung KaClima NK 91-171</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (158 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">5-Stufen-Drehstromsteuerung, Typ 3075*</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (140 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">Anbindungskonzept KaControl C1</td>
<td data-target="type" class="table__content table__content--type">KNX-Applikation</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
</tbody>
</table>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
@import 'bootstrap/scss/tables.scss';
.table {
width: 100%;
text-align: left;
&__row {
order: var(--order, 0);
&:nth-child(2n) {
background: $gray-medium;
}
}
&__head {
font-size: $font-size-base;
padding: $grid-gutter-width 1rem;
text-transform: uppercase;
cursor: pointer;
font-weight: 400;
letter-spacing: $letter-spacing;
border-bottom: 1px solid $primary !important;
&__wrapper {
display: flex;
}
&--primary {
color: $secondary;
background: $primary !important;
}
&--secondary {
color: $body-color;
background: $secondary !important;
}
}
&__sort {
display: flex;
flex-direction: column;
margin-top: -10px;
margin-bottom: -10px;
&__item {
display: flex;
height: 20px;
width: 30px;
align-items: center;
justify-content: center;
transition: 0.3s;
padding-top: 10px;
&:hover,
&--active,
[aria-sort='ascending'] &--asc,
[aria-sort='descending'] &--desc {
color: $green;
}
&--desc {
transform: rotate(180deg);
}
}
}
&__content {
padding: $grid-gutter-width 1rem;
color: $primary;
}
}
@include media-breakpoint-down(md) {
.table {
&__row {
display: flex;
flex-wrap: wrap;
background: $gray-medium;
&--header {
display: none;
}
& > .table__head:first-child {
display: none;
}
& > .table__content:first-of-type {
background-color: $primary;
color: $secondary;
}
& > .table__head,
& > .table__head--primary {
color: $body-color;
background-color: transparent;
}
}
&__head {
width: 200px;
flex-grow: 1;
padding: $grid-gutter-width / 2;
}
&__sort {
display: none;
}
&__content {
width: 100%;
min-width: 200px;
padding: $grid-gutter-width / 2;
background-color: $secondary;
}
}
}
<table class="table" cellspacing="0" cellpadding="0">
<tbody class="table__wrapper">
<tr class="table__row table__row--header">
<th data-target="title" class="table__head table__head--secondary table__head--title">
<div class="table__head__wrapper">
Titel
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
<th data-target="type" class="table__head table__head--secondary table__head--type">
<div class="table__head__wrapper">
Typ
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
<th data-target="language" class="table__head table__head--secondary table__head--language">
<div class="table__head__wrapper">
Sprache
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
<th data-target="mime" class="table__head table__head--secondary table__head--mime">
<div class="table__head__wrapper">
Dateityp
<div class="table__sort">
<span class="table__sort__item table__sort__item--asc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg> </span
><span class="table__sort__item table__sort__item--desc">
<svg
width="12px"
height="7px"
viewBox="0 0 12 7"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M11.3598473,0.109822589 C11.5063008,-0.0366171894 11.7437376,-0.0366061144 11.8901774,0.109847326 C12.0183122,0.237994086 12.0343206,0.435800032 11.9382082,0.581352436 L11.8901527,0.640177411 L6.53035381,5.99947615 C6.38976473,6.1402656 6.19896472,6.21937716 6,6.21937716 C5.83419607,6.21937716 5.67406207,6.16443857 5.54404671,6.06476681 L5.46984733,5.99967741 L0.109847326,0.640177411 C-0.0366061144,0.493737633 -0.0366171894,0.256300766 0.109822589,0.109847326 C0.237957395,-0.0182994344 0.435761847,-0.0343262587 0.581323217,0.0617725393 L0.640152674,0.109822589 L6,5.4691 L11.3598473,0.109822589 Z"
transform="translate(6.000000, 3.109689) scale(1, -1) translate(-6.000000, -3.109689) "
></path>
</svg>
</span>
</div>
</div>
</th>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">2-Stufen-Drehschalter, Typ 30049</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">2-Stufen-Drehschalter, Typ 30051</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">2-Stufen-Drehstromsteuerung, Typ 30277</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Spanisch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">350 Anleitung KaClima NK 91-171</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (158 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">5-Stufen-Drehstromsteuerung, Typ 3075*</td>
<td data-target="type" class="table__content table__content--type">Montageanleitung</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (140 kB)</td>
</tr>
<tr class="table__row table__row--content">
<td data-target="title" class="table__content table__content--title">Anbindungskonzept KaControl C1</td>
<td data-target="type" class="table__content table__content--type">KNX-Applikation</td>
<td data-target="language" class="table__content table__content--language">Deutsch</td>
<td data-target="mime" class="table__content table__content--mime">PDF (142 kB)</td>
</tr>
</tbody>
</table>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
@import 'bootstrap/scss/tables.scss';
.table {
width: 100%;
text-align: left;
&__row {
order: var(--order, 0);
&:nth-child(2n) {
background: $gray-medium;
}
}
&__head {
font-size: $font-size-base;
padding: $grid-gutter-width 1rem;
text-transform: uppercase;
cursor: pointer;
font-weight: 400;
letter-spacing: $letter-spacing;
border-bottom: 1px solid $primary !important;
&__wrapper {
display: flex;
}
&--primary {
color: $secondary;
background: $primary !important;
}
&--secondary {
color: $body-color;
background: $secondary !important;
}
}
&__sort {
display: flex;
flex-direction: column;
margin-top: -10px;
margin-bottom: -10px;
&__item {
display: flex;
height: 20px;
width: 30px;
align-items: center;
justify-content: center;
transition: 0.3s;
padding-top: 10px;
&:hover,
&--active,
[aria-sort='ascending'] &--asc,
[aria-sort='descending'] &--desc {
color: $green;
}
&--desc {
transform: rotate(180deg);
}
}
}
&__content {
padding: $grid-gutter-width 1rem;
color: $primary;
}
}
@include media-breakpoint-down(md) {
.table {
&__row {
display: flex;
flex-wrap: wrap;
background: $gray-medium;
&--header {
display: none;
}
& > .table__head:first-child {
display: none;
}
& > .table__content:first-of-type {
background-color: $primary;
color: $secondary;
}
& > .table__head,
& > .table__head--primary {
color: $body-color;
background-color: transparent;
}
}
&__head {
width: 200px;
flex-grow: 1;
padding: $grid-gutter-width / 2;
}
&__sort {
display: none;
}
&__content {
width: 100%;
min-width: 200px;
padding: $grid-gutter-width / 2;
background-color: $secondary;
}
}
}