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 it in $colors. See also how to work with colors for modules.


// =Colors
$colors: map-extend($colors, (
    table: (
        striped: 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>