Modules

Table

This module helps to work with tables.

Usage #

This is how the table in Superkube looks like by default.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94

<table>
<thead>
    <tr>
        <th>...</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>...</td>
    </tr>
</tbody>
</table>

Bordered #

Use the table-bordered class to add borders from all sides of the table cell.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94

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

Striped #

Use the table-striped class to add zebra stripes for table rows.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Marks 82
Anna Stones 36

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

You can change the color of the stripe. To do this, override the table variable in your custom SCSS. See also how to customize framework.


.table-striped {
    --table-stripe-color: var(--palette-primary-lightest);
}

Width #

Use the Sizing module to specify the width of the table cells.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94

<table>
    <tr>
        <td class="w-25">...</td>
        <td class="w-25">...</td>
        <td>...</td>
    </tr>
</table>

Nowrap #

Use the text-nowrap modifier from the Text module to stop moving the words in the cell to a new line.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94

<table class="table-bordered">
    <tr>
        <th class="text-nowrap">...</th>
        <th class="text-nowrap">...</th>
        <th class="w-100">...</th>
    </tr>
</table>

Scrollable #

Wrap the table in div with the class table-scrollable, so that on small screens the table does not go beyond the screen.

Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9 Col 10 Col 11 Col 12 Col 13 Col 14 Col 15 Col 16

<div class="table-scrollable">
    <table>...</table>
</div>

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.


--table-border-color: var(--table-default-border-color);
--table-stripe-color: var(--table-default-stripe-color);