No notes defined.

<table class="">
    <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>
  • Content:
    @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);
            }
        }
    }
    
  • URL: /components/raw/table/_index.scss
  • Filesystem Path: resources/styles/atoms/table/_index.scss
  • Size: 1.2 KB