Table

roolith css has four different table layouts with fixed and fluid size. Take a look an example below -

Table default

<table class="table full-width">
    <thead>
    <tr>
        <th>Name</th>
        <th>Rank</th>
        <th>Sex</th>
        <th>Class</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Thor</td>
        <td>4 star</td>
        <td>Male</td>
        <td>Cosmic</td>
    </tr>
    <tr>
        <td>Jane foster</td>
        <td>5 star</td>
        <td>Female</td>
        <td>Mystic</td>
    </tr>
    <tr>
        <td>Crossbone</td>
        <td>4 star</td>
        <td>Male</td>
        <td>Skill</td>
    </tr>
    <tr>
        <td>Black panther (civil war)</td>
        <td>6 star</td>
        <td>Male</td>
        <td>Skill</td>
    </tr>
    </tbody>
</table>

Table bordered

<table class="table table-bordered"></table>

Table primary

<table class="table table-primary"></table>

Table striped

<table class="table table-striped"></table>

Sometimes table content doesn't fit in small container or for mobile devices. User .table-responsive class name as wrapper of table.

<div class="table-responsive">
    <table class="table"></table>
</div>

SASS

Reference from _table.scss

$table-spacing: rem(10) !default;

:root {
    --r-table-header-border-color: var(--r-color-light-darken-10);
    --r-table-border-color: var(--r-color-light-darken-5);
    --r-table-header-font-weight: var(--r-global-font-bold-weight);
    --r-table-spacing: #{$table-spacing};
    --r-table-row-hover-color: var(--r-color-light-darken-2);
    --r-table-primary-header-color: var(--r-color-light-darken-5);
    --r-table-row-striped-color: var(--r-color-light-darken-2);
    --r-table-row-striped-hover-color: var(--r-color-info-lighten-40);
}