<div class="row no-gutters">
    <div class="grid">
        <div class="table-container">
            <table class="m-table m-table--columns">
                <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}}
						<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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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": "m-table--columns",
  "scrollable": false
}
  • Content:
    @charset 'UTF-8';
    
    @mixin table() {
    	width: 100%;
    	border-collapse: collapse;
    	border: 0;
    	counter-reset: table-counter;
    
    	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: $color-cyberspace;
    		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: $color-snow;
    			}
    		}
    	}
    
    	@include m(rows) {
    		thead {
    			th {
    				background-color: $color-ash;
    			}
    		}
    
    		tbody {
    			tr:nth-child(odd) {
    				th,
    				td {
    					background-color: $color-snow;
    				}
    			}
    
    			tr:nth-child(even) {
    				th,
    				td {
    					background-color: $color-ash;
    				}
    			}
    		}
    	}
    
    	@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: $color-ash;
    				}
    			}
    
    			tr:nth-child(even) {
    				th,
    				td {
    					background-color: $color-snow;
    				}
    			}
    		}
    
    		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();
    }
    
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: src/molecules/table/_table.scss
  • Size: 3.9 KB

Tables

The scrollable table starts scrolling < 769px width wich is the medium breakpoint.