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 class="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 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 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-background-color: var(--palette-primary-lightest);
}

Width #

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

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94


<table>
    <tr>
        <td class="max-25">...</td>
        <td class="max-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 table-bordered">
    <tr>
        <th class="text-nowrap">...</th>
        <th class="text-nowrap">...</th>
        <th class="max-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 table-scrollable">
    <table>...</table>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// colors
--table-border-color: var(--palette-black-7);
--table-head-border-color: var(--palette-black-7);

// params
--table-font-size: 15px;
--table-line-height: var(--body-text-line);
--table-border-style: solid;
--table-border-width: 1px;
--table-head-border-style: solid;
--table-head-border-width: 1px;
--table-padding: 0.75em 6rem 0.75em 2rem;

// table striped
--table-background-color: var(--palette-neutral-lightest);