No notes defined.
<div class="table -scrollable">
<table class="table__container">
<thead>
<tr>
<th>Elit reprehenderit</th>
<th>Lorem nobis</th>
<th>Amet repudiandae</th>
<th>Ipsum earum</th>
<th>Adipisicing illo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adipisicing praesentium</td>
<td>Elit exercitationem</td>
<td>Amet quam omnis cupiditate reprehenderit iste Debitis facere sint culpa?</td>
<td>Lorem error tenetur rem fugit culpa voluptates Voluptatibus incidunt modi</td>
<td>Consectetur sapiente esse animi odio iusto, numquam Illum iusto magnam</td>
</tr>
<tr>
<td>Dolor beatae</td>
<td>Amet quis quod</td>
<td>Adipisicing quae alias cum vitae quidem Illo voluptate ratione et!</td>
<td>Sit recusandae asperiores architecto similique illum cupiditate Neque odit quod?</td>
<td>Adipisicing ad amet facilis explicabo laborum Necessitatibus tempora eligendi sit</td>
</tr>
<tr>
<td>Amet sit</td>
<td>Ipsum dolorem rem assumenda</td>
<td>Elit et enim nostrum voluptate cupiditate minus Libero doloremque error</td>
<td>Lorem optio consequatur mollitia praesentium repellendus. Harum a repellat error.</td>
<td>Ipsum pariatur ea ipsam in laboriosam, possimus ratione! Sed numquam!</td>
</tr>
<tr>
<td>Consectetur dolores</td>
<td>Amet distinctio ullam</td>
<td>Ipsum esse vitae minus officia asperiores Perspiciatis eos exercitationem possimus</td>
<td>Lorem dolor vero esse ex minima Explicabo est nisi libero.</td>
<td>Consectetur quas asperiores in iure vitae Illum reiciendis veritatis ullam?</td>
</tr>
<tr>
<td>Elit incidunt</td>
<td>Sit iusto</td>
<td>Amet exercitationem modi dicta suscipit cum Molestias eius quae tenetur.</td>
<td>Elit inventore aspernatur reprehenderit voluptates quo? Molestiae et dignissimos dolores</td>
<td>Dolor at eum voluptates eius magni ipsa nemo! Quia enim?</td>
</tr>
<tr>
<td>Lorem adipisicing</td>
<td>Amet</td>
<td>Adipisicing odio fugiat aperiam maiores quibusdam Ex odio quibusdam veniam.</td>
<td>Lorem libero nemo odio cupiditate vel? Dolores dignissimos ad illo.</td>
<td>Consectetur mollitia quaerat hic iste mollitia. Sint id aliquid eaque.</td>
</tr>
<tr>
<td>Sit elit</td>
<td>Elit harum dolores voluptatum illo voluptatibus</td>
<td>Consectetur fuga est asperiores nulla quis Esse repudiandae et maiores</td>
<td>Lorem nesciunt exercitationem quisquam officia fugit. Iure sapiente beatae iste.</td>
<td>Ipsum dolor aliquid quis nihil voluptas non Possimus facere vero</td>
</tr>
<tr>
<td>Ipsum vitae</td>
<td>Adipisicing explicabo quam</td>
<td>Amet veritatis cumque nemo blanditiis esse? Enim fugiat maxime illo</td>
<td>Dolor debitis fugit at dolore voluptatum Officia consectetur hic ea</td>
<td>Ipsum eum dolorum iure debitis blanditiis fuga! Alias sapiente cupiditate.</td>
</tr>
<tr>
<td>Lorem qui</td>
<td>Elit aspernatur dolor</td>
<td>Lorem omnis beatae facere aliquam nemo quisquam Accusamus perferendis quaerat.</td>
<td>Consectetur omnis est voluptatem nihil expedita vero Corporis exercitationem nesciunt.</td>
<td>Elit est temporibus reprehenderit ullam eum? Deleniti iusto nisi totam?</td>
</tr>
<tr>
<td>Amet reiciendis</td>
<td>Consectetur lorem aliquam quia odio</td>
<td>Sit illum animi consequuntur vitae ut. Inventore quidem odit quo?</td>
<td>Dolor debitis assumenda id cupiditate id Aperiam labore eveniet maxime</td>
<td>Amet et ut distinctio rem dolore Ducimus voluptatum omnis voluptatem?</td>
</tr>
</tbody>
</table>
</div>
@use "sass:map";
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
///
/// = Tables =
///
.table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 2rem;
width: 100%;
&__container {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 2rem;
width: 100%;
}
caption {
font-size: 0.9rem;
margin-bottom: 0.75em;
}
td,
th {
padding: config.$padding;
text-align: left;
vertical-align: top;
}
th {
background-color: config.$primary;
color: config.$white;
white-space: nowrap;
}
tr {
border-bottom: 1px solid config.$border;
transition: background-color config.$fade-easing var(--duration-fast);
}
tr:hover {
background-color: config.$blue-100;
}
&.-scrollable {
overflow-x: auto;
width: calc(100% + 2 * var(--column-gap));
display: flex;
margin-left: calc(-1 * var(--column-gap));
margin-right: calc(-1 * var(--column-gap));
&::before,
&::after {
content: '';
min-width: var(--column-gap);
}
}
}