Tables

Tailwind

Provides a set of styles for native HTML table elements.

@skeletonlabs/skeleton
View Source
Doc Source

Examples

Position Name Symbol Weight
1 Hydrogen H 1.0079
2 Helium He 4.0026
3 Lithium Li 6.941
4 Beryllium Be 9.0122
5 Boron B 10.811
Total Weight 31.7747

Usage

Wrap a .table-container element around any native HTML table with the .table class applied to create a responsive table.

html 
<div class="table-container">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Position</th>
                <th>Name</th>
                <th>Symbol</th>
                <th>Weight</th>
            </tr>
        </thead>
        <tbody>
            {#each tableArr as row, i}
                <tr>
                    <td>{row.position}</td>
                    <td>{row.name}</td>
                    <td>{row.symbol}</td>
                    <td>{row.weight}</td>
                </tr>
            {/each}
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3">Calculated Total Weight</th>
                <td>{totalWeight}</td>
            </tr>
        </tfoot>
    </table>
</div>

Additional Table Options

A simple data-driven table component.

Tables Component →

Powerful template-driven utility features for data tables.

Data Table Utilities →