Table

@use '@natachah/vanilla-frontend/scss/components/table';

Syntax

The table is using the native <table> tag.

html

<table>
    <caption>Caption of the table</caption>
    <thead>
        <tr>
            <th>Head A</th>
            <th>Head B</th>
            <th>Head C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Foot A</th>
            <th>Foot B</th>
            <th>Foot C</th>
        </tr>
    </tfoot>
</table>

css properties

--table-padding-inline
--table-padding-block
--table-align-inline
--table-align-block
--table-border-size
--table-border-style
--table-border-color
--table-divider-size
--table-divider-style
--table-divider-color

Responsive

To render a table responsive, you can use the SCSS mixin as-responsive-table() inside a @media or @container.

It require the attribute data-label="Name of the column" on each <td>.

html

<div class="as-container">
    <table id="responsiveTable">
        <thead>
            <tr>
                <th>Header A</th>
                <th>Header B</th>
                <th>Header C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Header A">Cell</td>
                <td data-label="Header B">Cell</td>
                <td data-label="Header C">Cell</td>
            </tr>
        </tbody>
    </table>
</div>

scss

// Import the mixins
@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;

// Create a container
.as-container {
    container-type: inline-size;
    min-height: 300px;
    overflow: hidden;
}

// Demo for responsive table
@container (max-width:500px) {
    #responsiveTable {
        @include as-responsive-table()
    }
}

css property

--table-grid-template