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-header-border-color: lighten(map-get($colors, dark), 75%);
$table-border-color: lighten(map-get($colors, dark), 80%);
$table-header-font-weight: $global-font-bold-weight;
$table-spacing: rem(10);
$table-row-hover-color: lighten(map-get($colors, dark), 85%);
$table-primary-header-color: lighten(map-get($colors, dark), 82%);
$table-row-striped-color: lighten(map-get($colors, dark), 85%);
$table-row-striped-hover-color: lighten(map-get($colors, info), 43%);