LumoCSS logoLumoCSS logo
Content

Table

Standard HTML table styling. Add the .striped class for striped rows. Wrap in.overflow-auto for responsive horizontal scrolling.

Default

Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Planet Diam. (km) Dist. to Sun (AU) Grav. (m/s²)
Mercury 4,880 0.39 3.7
Venus 12,104 0.72 8.9
Earth 12,742 1.00 9.8 
<table>
    <thead>
        <tr>
            <th>Lorem ipsum</th>
            <th>Lorem ipsum</th>
            <th>Lorem ipsum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
        </tr>
        <tr>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
        </tr>
    </tbody>
</table>

<div class="overflow-auto" style="margin-top: 1rem;">
    <table class="striped">
        <thead>
            <tr>
                <th scope="col">Planet</th>
                <th scope="col">Diam. (km)</th>
                <th scope="col">Dist. to Sun (AU)</th>
                <th scope="col">Grav. (m/s²)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Mercury</th>
                <td>4,880</td>
                <td>0.39</td>
                <td>3.7</td>
            </tr>
            <tr>
                <th scope="row">Venus</th>
                <td>12,104</td>
                <td>0.72</td>
                <td>8.9</td>
            </tr>
            <tr>
                <th scope="row">Earth</th>
                <td>12,742</td>
                <td>1.00</td>
                <td>9.8</td>
            </tr>
        </tbody>
    </table>
</div>