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);