<div class="row no-gutters">
<div class="grid">
<div class="table-container">
<table class="m-table">
<thead>
<tr>
<th>Table header</th>
<th>Table header</th>
<th>Table header</th>
<th>Table header</th>
<th>Table header</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Table cell</a></td>
<td>42 <small>mkr</small></td>
<td>10 000 <small>Mbit</small> </td>
<td>175 000 000 <small>.se</small> </td>
<td>99 <small>kr/mån</small> </td>
</tr>
<tr>
<td><a href="#">Table cell</a></td>
<td>42 <small>mkr</small></td>
<td>10 000 <small>Mbit</small> </td>
<td>175 000 000 <small>.se</small> </td>
<td>99 <small>kr/mån</small> </td>
</tr>
<tr>
<td><a href="#">Table cell</a></td>
<td>42 <small>mkr</small></td>
<td>10 000 <small>Mbit</small> </td>
<td>175 000 000 <small>.se</small> </td>
<td>99 <small>kr/mån</small> </td>
</tr>
<tr>
<td><a href="#">Table cell</a></td>
<td>42 <small>mkr</small></td>
<td>10 000 <small>Mbit</small> </td>
<td>175 000 000 <small>.se</small> </td>
<td>99 <small>kr/mån</small> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Table footer</td>
<td>Table footer</td>
<td>Table footer</td>
<td>Table footer</td>
<td>Table footer</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="grid">
{{#if scrollable}}
<div class="table-scroll-wrapper scroll-on-large u-m-b-double">
<div class="scroll-indicator"></div>
{{/if}}
<div class="table-container">
<table class="m-table{{#if modifier}} {{modifier}}{{/if}}" {{#if scrollable}}style="min-width:1360px"{{/if}}>
{{#unless increment}}
{{#if caption}}
<caption>Caption for the table</caption>
{{/if}}
<thead>
<tr>
<th>{{th}}</th>
<th>{{th}}</th>
<th>{{th}}</th>
<th>{{th}}</th>
<th>{{th}}</th>
</tr>
</thead>
{{/unless}}
<tbody>
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
</tr>
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
</tr>
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
</tr>
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
</tr>
</tbody>
{{#unless increment}}
<tfoot>
<tr>
<td>{{tfoot}}</td>
<td>{{tfoot}}</td>
<td>{{tfoot}}</td>
<td>{{tfoot}}</td>
<td>{{tfoot}}</td>
</tr>
</tfoot>
{{/unless}}
</table>
</div>
{{#if scrollable}}
</div>
</div>
{{/if}}
</div>
</div>
{
"th": "Table header",
"td": "Table cell",
"tfoot": "Table footer",
"td_num1": "42",
"td_unit1": "mkr",
"td_num2": "10 000",
"td_unit2": "Mbit",
"td_num3": "175 000 000",
"td_unit3": ".se",
"td_num4": "99",
"td_unit4": "kr/mån",
"modifier": false,
"caption": false
}
@charset 'UTF-8';
@mixin table() {
width: 100%;
border-collapse: collapse;
border: 0;
counter-reset: table-counter;
caption {
font-family: $font-family-headings;
padding-top: rhythm(1);
padding-bottom: rhythm(1);
}
thead,
tfoot {
font-family: $font-family-mono;
font-size: 85%;
text-transform: uppercase;
}
tfoot {
th,
td {
border-top: 2px solid $color-granit;
font-family: $font-family-headings;
font-size: 90%;
&::before {
display: none;
}
@include bp-up(lg) {
font-size: 100%;
}
}
td {
border-top-width: 1px;
}
}
tbody {
font-weight: normal;
th {
border-bottom-width: 1px;
}
}
th {
font-weight: 700;
}
th,
td {
padding-top: rhythm(1);
padding-right: rhythm(2);
padding-bottom: rhythm(1);
padding-left: rhythm(2);
border-bottom: 2px solid $color-granit;
color: var(--cyberspace-color);
font-size: 90%;
text-align: left;
&:first-child {
text-align: left;
}
span:not(.block-icon) {
display: block;
font-weight: 400;
}
a {
white-space: nowrap;
}
p {
display: inline;
}
@include bp-up(lg) {
font-size: 100%;
}
}
td {
border-bottom-width: 1px;
}
}
@include b(table-container) {
position: relative;
width: 100%;
max-width: 1320px;
margin-right: auto;
margin-left: auto;
&:focus {
outline: none;
}
}
@keyframes xPulse {
0% {
right: 0;
opacity: 1;
}
50% {
right: 10px;
opacity: 0.3;
}
100% {
right: 0;
opacity: 1;
}
}
@include molecule(table) {
@include table();
@include m(columns) {
th {
border-bottom: 2px solid $color-granit;
}
td {
border-bottom: 1px solid $color-granit;
}
th,
td {
&:nth-child(even) {
background-color: var(--snow-color);
}
}
}
@include m(rows) {
thead {
th {
background-color: var(--ash-color);
}
}
tbody {
tr:nth-child(odd) {
th,
td {
background-color: var(--snow-color);
}
}
tr:nth-child(even) {
th,
td {
background-color: var(--ash-color);
}
}
}
}
@include m(align-text-center) {
th,
td {
text-align: center;
&:first-child {
text-align: left;
}
}
}
@include m(increment) {
tbody {
tr:nth-child(odd) {
th,
td {
background-color: var(--ash-color);
}
}
tr:nth-child(even) {
th,
td {
background-color: var(--snow-color);
}
}
}
th {
width: rhythm(4);
padding-right: rhythm(3);
&::before {
content: counter(table-counter);
counter-increment: table-counter;
}
}
}
@include m(lines) {
tbody {
tr {
background-image:
linear-gradient(
to right,
$color-cyberspace,
$color-cyberspace 2px,
transparent 2px,
transparent 6px
);
background-repeat: repeat-x;
background-position: bottom left;
background-size: 6px 1px;
}
td,
th {
padding-top: rhythm(2);
padding-bottom: rhythm(2);
border: 0;
}
}
tfoot {
tr {
background-image: none;
th,
td {
border: 0;
}
}
}
}
}
@include b(scroll-indicator) {
display: block;
position: relative;
width: 100%;
height: rhythm(3);
&::before {
content: 'Scroll';
position: absolute;
z-index: z_index(background);
top: 0;
right: rhythm(3);
width: rhythm(7);
height: 0;
animation: xPulse 2s infinite;
font-family: $font-family-mono;
font-size: 80%;
text-transform: uppercase;
}
&::after {
content: '›';
position: absolute;
z-index: z_index(background);
top: -#{rem(4px)};
right: 0;
animation: xPulse 2s infinite;
font-family: $font-family-mono;
}
}
@include b(table-scroll-wrapper) {
@include b(table-container) {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
@include bp-up(sm) {
@include b(scroll-indicator) {
display: none;
}
}
}
// Default styling for tables without classes
table {
@include table();
}
// Styling for default WP Table Block
.wp-block-table {
@include table();
}
The scrollable table starts scrolling < 769px width wich is the medium breakpoint.